Question

我正在尝试执行测试编号滑块程序，我发现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>

Answer 1

问题是第二次调用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>

为什么javascript setTimeout不起作用，setInterval适用于以下程序

1 个答案: