CODEWITHSUNDEEP
javascripttimersettimeoutcleartimeout
tx291
tx291

Reputation: 1331

clearTimeout() not stopping setTimeout

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);
  }

Upvotes: 2

Views: 16535

Answers (5)

Pedro404
Pedro404

Reputation: 178

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

Upvotes: 0

Scott Miller
Scott Miller

Reputation: 57

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.

Upvotes: 0

Richard Hamilton
Richard Hamilton

Reputation: 26434

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.com/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.

Upvotes: 4

Rahul Arora
Rahul Arora

Reputation: 4523

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);
  }

Upvotes: 0

Jonathan Lonowski
Jonathan Lonowski

Reputation: 123423

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 become global variables.

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

Upvotes: 4

Related Questions