重置超时 javascript

Question

当用户单击元素时，它应该启动超时并将开始时间设置为 true。然后，如果用户在计时器处于活动状态时再次单击元素，它应该清除超时并重新启动超时。但是我仍然从第一个和随后的超时开始获取控制台。 cleartimeout 不应该只给我一个，最后一个创建的吗？我已经在这里 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);

Answer 1

每次调用该函数时，您都会创建一个新的 Timer 变量，因此当您尝试清除超时时，Timer 变量不会引用您创建的实际超时。

Answer 2

定义全局变量，例如

var myTimeOut = 0;

然后在你的方法中调用 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);

Answer 3

这样做：

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

Answer 4

我认为这段代码应该可以满足您的要求。

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

重置超时 javascript

resetting timeout javascript

javascript

time

jquery

vue.js