Question

我正在尝试不断循环遍历数值的数组，这些数值将作为触发另一个函数的延迟值传递给setInterval函数。这就是我所拥有的：

HTML：

<p>On</p>

JavaScript的：

$(document).ready(function(){
    var timing = [5000, 10000, 17000, 8000, 14000, 9000, 12000, 8000, 20000, 7000, 13000, 7000, 17000, 8000, 13000, 12000, 18000]
    //function to change
    function change(){
            var p = $("p").html();
            if(p === "On"){
                $("p").html("Off"); 
            } else {
                $("p").html("On");
            }
        }


    function myFunction(){
        for (var i = 0; i < timing.length; i++){
            var switchTime = timing[i];

            setInterval(function(){
                change(); 

            },switchTime);

        }
    } myFunction();

});

我希望在不同的延迟时间连续触发更改功能。现在，当我运行它时，时间似乎不正确。任何建议表示赞赏。谢谢！

Answer 1

只需在i函数内增加变量setInterval。

function myFunction(){
    for (var i = 0; i < timing.length; ){
        var switchTime = timing[i];

        setInterval(function(){
            change(); 
           i++;
        },switchTime);

    }
}

Answer 2

使用setTimeout代替setInterval，因为您是在循环中执行此操作。 setInterval将初始化一个在指定延迟时间内连续发射的定时器（例如，如果延迟5秒，它将在5,10,15等处发射）。通过在迭代中使用setTimeout，计时器仅在指定的延迟后每次迭代触发一次，下一次迭代为下一个延迟值初始化一个新的计时器。

Answer 3

我假设您拨打setInterval时可能无法清除旧的间隔。根据{{3}}，您可能需要使用clearInterval清除之前的时间间隔。特别是如果你在所有间隔时使用相同的方法，我认为你可能得不到你想要的。所以：

创建间隔，全局保存当前ID
调用回调时，使用clearInterval函数
重复

Answer 4

在任何情况下，使用循环都不起作用，因为很多setInterval（或setTimeout()）会在几微秒内“立即”启动。
所以他们按照他们自己的timing[i]所做的工作，但几乎在同一时间！

相反，您必须仅在前一个步骤结束时启动每个步骤。

这是一个工作示例（另请参阅this fiddle），其中我添加了一些流程的可视化跟踪：

HTML：

<p id="on-off">On</p>
<p id="delay"></p>

使用Javascript：

$(document).ready(function(){
  var timing = [
    5000, 10000, 17000, 8000, 14000, 9000, 12000, 8000, 20000, 7000, 13000,
    7000, 17000, 8000, 13000, 12000, 18000
  ];
  function myFunction(i){
    i |= 0;
    if (i < timing.length - 1) {
      var switchTime = timing[i]
          $onOff = $('#onOff');
      $('#delay').html('i=' + i + ', delay=' + switchTime);
      $onOff.html($onOff.html() == 'On' ? 'Off' : 'On');
      setTimeout(
        function() {
          myFunction(i + 1);
        }, switchTime
      )
    } else {
      $('#delay').html('end');
    }
  }
  myFunction();
});

循环遍历数组并延迟函数

4 个答案: