clearTimeout 不工作 - 尝试了很多变化

Question

我对 clearTimeout 函数有疑问。两种情况都有效，但超时拒绝清除......欢迎任何帮助。时间为 300 毫秒 = params.speed。

**注意：该方法完全有效。我遇到的唯一问题是清除 setTimeout。它会产生一个错误，新的非超时烤面包机应用旧的 setTimeout。

意思是如果我在点击超时按钮后的 3 秒内点击非超时按钮，旧的 setTimeout 仍然适用于下一个烤面包机。

        // Beginning of function - line below contains the options for the 
        // toaster method:
        // Invoke via - onclick(e, {text: 'This is an alert with a TIMER', 
        // timer:true, speed: 3500, color: 'dark'})

        toaster: function(e, params = {}) {

            // Set defaults for params.object options
            var setDefaults = function () {
                if (e == null) {
                    e = this.event;
                };
                if (params.speed == null) {
                    params.speed = 3500;
                };
                if (params.timer == null) {
                    params.timer = false;
                };
                if (params.color == null) {
                    params.color = 'light';
                };
                if (params.text == null) {
                    params.text = 'This is a default warning'
                };
            }();

          //Apply timer function
          timerOn(params.speed); // params.speed = 4500
          var timing; // Variable set outside of the timerOn() function

          function timerOn () {

                if (params.timer) {
                    timing = setTimeout(function(){
                        el[0].classList.remove('show-toaster');
                        console.log('happening');
                    }, params.speed);  
                } else {
                    clearTimeout(timing);
                    console.log('just cleared timing variable');
                } 

            } // timerOn ends

Answer 1

你的代码不足以理解错误在哪里，以及你真正想做什么。但我认为我的代码将帮助您了解您错在哪里。

var timing;
var params = {
  timer: true,
  speed: 3000
};

function timerToggle() {
  clearTimeout(timing);
  if (params.timer) {
    timing = setTimeout(function() {
      alert("timer works");
    }, params.speed);
  }
}    

timerToggle();

$("button").on("click", function() {
  params.timer = false;
  timerToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click me or wait 3 sec</button>

Answer 2

我认为我们这里有一个范围问题。

假设我们有一个函数 test，当我们用 true 调用它时，我们将单词 hello 保存到一个名为 x 的变量中。如果我们然后用 false 再次调用所述函数，我们希望它 console.log x 的值，希望是 hello 这个词。

我们可以像这样创建函数->

function test(b) { var x; if (b) x = "hello"; else console.log(x); }
test(true); 
test(false);  //prints undefined

以上是根据 OP 所说的内容，是他对烤面包机功能所做的事情。问题是以上将最终打印 undefined

那么我们该如何解决，。我们所要做的就是移动 var x 声明，使其覆盖函数 test，这将使 var x 作用域成为这个测试实例的全局范围。 IOW：每次我们调用测试时，我们都希望它看到 x..

的相同实例

所以这是固定版本。

var x; function test(b) { if (b) x = "hello"; else console.log(x); }  
test(true); 
test(false);  //prints hello

正如预期的那样，将打印单词 hello..

现在，如果您认为函数 test 是 toaster 函数，而 var x 是 timer var，您可以看到 timer var 将在您下次调用 toaster..

时未定义

clearTimeout 不工作 - 尝试了很多变化

clearTimeout not working - Tried many variations

javascript

setinterval

cleartimeout