为什么javascript setTimeout不起作用，而setInterval对下面的程序起作用

我正在尝试执行一个测试数字滑块程序，我发现setTimeout不工作，setInterval对下面的程序有效。我不明白为什么会发生这种事。请帮帮我。

<html>
    <head>
    </head>
    <body>
    <h1 id="slide"></h1>
    </body>
    <script type=text/javascript>
    (function(){
       var i=0,
           numbers = [10,20,30,40,50,60],
           intervalTime = 3000;
        return {
            init:function(){
                console.log(numbers[i] +"-"+ i);
               document.getElementById("slide").innerHTML = numbers[i];
              if(i < numbers.length - 1) 
            i++;
           else
                   i=0; 
           setTimeout(this.init,intervalTime); 
               //setInterval(this.init,intervalTime); 

            }
        };      
    }()).init();
</script>
</html>

问题是当init方法被第二次调用时（通过setInterval调用，处理程序中的this没有引用匿名函数返回的对象。因此，在第二次呼叫中，this.init将未定义，因此您的回调将不再被调用。

当您使用setInterval时，只需要第一次调用它，然后定期调用相同的回调，这就是它工作的原因（多次调用setInterval仍然存在错误，这是不需要的）

您可以使用.bind()传递具有自定义上下文（如）的函数

(function() {
  var i = 0,
    numbers = [10, 20, 30, 40, 50, 60],
    intervalTime = 500;
  return {
    init: function() {
      console.log(numbers[i] + "-" + i);
      document.getElementById("slide").innerHTML = numbers[i];
      if (i < numbers.length - 1)
        i++;
      else
        i = 0;
      setTimeout(this.init.bind(this), intervalTime);
      //setInterval(this.init,intervalTime); 
    }
  };
}()).init();

<h1 id="slide"></h1>

相关内容

最新更新

热门标签：