resetting timeout javascript

Question

when user click element it should initiate the timeout and set the starttime to true. Then if user clicks element again while the timer is active it should clear the timeout and reinitiate the timeout. However im still getting the console from the first and the following timeout initiated. Shouldnt the cleartimeout leave me with only one, the final one created? Ive already tried the example from this question here How to reset timeout in Javascript/jQuery?.

    toggleCard: function(card){
                var Timer = null;
                if(this.startTime){
                    console.log('already activated');
                    window.clearTimeout(Timer);
                    this.startTime = false;
                }

                this.startTime = true;
                var Timer = setTimeout(function(){
//                        this.taskCard = false;
//                        this.classCard = true;
                    console.log('old timer')
                }.bind(this), 5000);

Senad Meškin · Accepted Answer · 2016-03-22 11:29:44Z

1

define global variable e.g.

var myTimeOut = 0;

then inside your method call clearTimeout

toggleCard: function(card){
                clearTimeout(myTimeOut);
                this.startTime = true;
                myTimeOut = setTimeout(function(){
//                        this.taskCard = false;
//                        this.classCard = true;
                    console.log('old timer')
                }.bind(this), 5000);

answered Mar 22, 2016 at 11:29

Senad Meškin

13.8k4 gold badges39 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jai · Accepted Answer · 2016-03-22 11:33:59Z

1

Do like this:

toggleCard: function(card) {
    window.Timer = null; // <-----------declare timer globally here
    if (this.startTime) {
      console.log('already activated');
      window.clearTimeout(Timer); // <------- clear here if it is.
      this.startTime = false;
    }

    Timer = setTimeout(function() { // <-------assign the setTimeout here
      this.startTime = true; // <---------It has to be here.
      //   this.taskCard = false;
      //   this.classCard = true;
      console.log('old timer')
    }.bind(this), 5000);

answered Mar 22, 2016 at 11:33

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

Venu prasad H S · Accepted Answer · 2016-03-22 12:57:59Z

1

I think this code should meet your requirement.

 var timer = null;
    var started = false;
    toggleCard = function (card) {
        if (started) {
            console.log('Timer already active');
            window.clearTimeout(timer);
        } else {
            console.log('Timer active now');
            started = true;
        }

        timer = setTimeout(function () {
            console.log('Timer elapsed! ');
            started = false;
        }.bind(this), 2000);
    };

answered Mar 22, 2016 at 12:57

Venu prasad H S

2411 silver badge8 bronze badges

Comments

Orr Siloni · Accepted Answer · 2016-03-22 11:25:37Z

0

Every time the function is called you are creating a new Timer variable, so when you try to clear the timeout, the Timer var doesn't reference the actual timeout you created.

answered Mar 22, 2016 at 11:25

Orr Siloni

1,30811 silver badges22 bronze badges

Collectives™ on Stack Overflow

resetting timeout javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related