javascript - clearTimeout() not stopping setTimeout - Stack Overflow

admin管理员组

文章数量:1342908

I'm trying to build a really simple timer in Javascript (based on input from an HTML form), and my clearTimeout isn't working-- not even hitting the console.log that I have. In my HTML, to call the clearTimeout, I just have . I'm really not sure why this isn't working-- any help would be greatly appreciated! Thanks!

  function settimer(){

hour = document.getElementById('h').value;
minute = document.getElementById('m').value;
sec = document.getElementById('s').value;

hour = hour * 3600000;
minute = minute * 60000;
sec = sec * 1000;
totalTime = hour+minute+sec;

 var timer = setTimeout(function(){alert("Time's up"); }, totalTime);
 }

  function clear(){
    console.log("stopped")
    clearTimeout(timer);
  }

I'm trying to build a really simple timer in Javascript (based on input from an HTML form), and my clearTimeout isn't working-- not even hitting the console.log that I have. In my HTML, to call the clearTimeout, I just have . I'm really not sure why this isn't working-- any help would be greatly appreciated! Thanks!

  function settimer(){

hour = document.getElementById('h').value;
minute = document.getElementById('m').value;
sec = document.getElementById('s').value;

hour = hour * 3600000;
minute = minute * 60000;
sec = sec * 1000;
totalTime = hour+minute+sec;

 var timer = setTimeout(function(){alert("Time's up"); }, totalTime);
 }

  function clear(){
    console.log("stopped")
    clearTimeout(timer);
  }

• javascript
• timer
• settimeout
• cleartimeout

Share Follow asked May 29, 2016 at 17:40 tx291tx291 1,33166 gold badges2525 silver badges4545 bronze badges 1

• 8 var timer only exists inside of settimer(). It'll need to be declared outside of the functions for them both to have access to it. – Jonathan Lonowski Commented May 29, 2016 at 17:43

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

When using var, timer is declared as a local variable within settimer() and only exists inside of the function's body of statements.

To allow both functions to share access to it, the variable will have to be declared outside of them. settimer() can still assign to it, but then clear() can access it as well.

// declare variable in surrounding scope
var timer;

function settimer() {
    // ...

    // assign to declared variable
    timer = setTimeout(function(){alert("Time's up"); }, totalTime);
}

function clear(){
    console.log("stopped")
    clearTimeout(timer);
}

---

Note: The other variables being used, since they're only needed inside settimer(), should be declared as locals.

function settimer() {
    var hour = document.getElementById('h').value;
    var minute = document.getElementById('m').value;
    var sec = document.getElementById('s').value;

    hour = hour * 3600000;
    minute = minute * 60000;
    sec = sec * 1000;

    var totalTime = hour+minute+sec;

    // ...
}

By not really declaring them at all, they'll automatically bee global variables.

Related: What is the function of the var keyword and when to use it (or omit it)?

You are declaring your timer variable inside a function, so it's scope is only local to that function. It cannot be called outside the function. To fix this, move the variable outside of your function.

A variable that is declared outside a function definition is a global variable, and its value is accessible and modifiable throughout your program.

A variable that is declared inside a function definition is local. It is created and destroyed every time the function is executed, and it cannot be accessed by any code outside the function.

Here's the documentation from Mozilla Developer Network

https://msdn.microsoft./library/bzt2dkta(v=vs.94).aspx

First declare the timer and total_time variables outside of any function, giving it local scope.

var timer;
var total_time;

Now, create the function to set the timer. Note that we want to use the var keyword to make these variables local to the scope.

function setTimer(){

    var hour = +(document.getElementById('h').value) * 3600000;
    var minute = +(document.getElementById('m').value) * 60000;
    var sec = +(document.getElementById('s').value) * 1000;

    totalTime = hour + minute + sec;    // Assign total time to variable
    alert("Time's up");
}

Assign the value of timer to setTimeout. We can now use the totalTime variable as the amount of time.

timer = setTimeout(setTimer, totalTime);

We can now stop the timer, because it has been given local scope.

function clear() {
    console.log("stopped")
    clearTimeout(timer);
}

It should work now. Try it again.

Simple solution to this. I have hardcoded the values of hour, min and sec, but you can always get them from the desired place

var totalTime;

 function settimer(){

    hour = 0;
    minute = 0;
    sec = 2;

    hour = hour * 3600000;
    minute = minute * 60000;
    sec = sec * 1000;
    totalTime = hour+minute+sec;

};

settimer();

 var timer = setTimeout(function(){
     alert("Time's up"); 
     clear();
  }, totalTime);




  function clear(){
    console.log("stopped")
    clearTimeout(timer);
  }

You can either hoist timer outside of the function or instantiate timer without declaring it with var rendering it a global variable so that it can be accessed by external functions.

Try like this:

//
const elemDemo = document.querySelector(".demo");

//!---: Function
const timeoutId = new (function () {
  let timer;

  this.next = function () {
    timer = window.setTimeout(function () {
      timeoutId.work();
      timeoutId.next();
    }, 500);
  };

  this.work = function () {
    elemDemo.innerHTML += " = +";
  };

  this.stop = function () {
    clearTimeout(timer);
  };
})();
//!---: Function

document.querySelector('.start').addEventListener('click', timeoutId.next);
document.querySelector('.stop').addEventListener('click', timeoutId.stop);

document.addEventListener("DOMContentLoaded", function (event) {
    elemDemo.innerHTML = 'Out -';
});

:root,
* {
    background-color: #1D1E22;
    color: white;
    font: 1.1em Consolas;
}

button {
    border: 1px solid violet;
    padding: .3rem 2rem;
    width: 8rem;
}

<div class='demo'></div>
<br>
<button class='start'>Start</button>
<br>
 <button class='stop'>Stop</button>

Codepen DEMO

本文标签： javascriptclearTimeout() not stopping setTimeoutStack Overflow