每个循环中的 settimeout 有问题

Question

我正在尝试循环一些以毫秒为单位的值。我需要每隔 xxxx 秒运行一些代码，具体取决于他从循环中获得的值，但我无法让它工作，它工作得很好，但它没有按时运行。

代码包含一个重置按钮（代码来自插件，但我不得不修改它）

//插件选项

  step:[
      {
          time: 6000,
          // more stuff here 
          // but we dont need 
          // it in this example
      },
      {
          time: 3000,
          // more stuff here 
          // but we dont need 
          // it in this example
      },
      {
          time: 12000,
          // more stuff here 
          // but we dont need 
          // it in this example
      }
  ]

// 循环

  var timeouts = [];
  $.each(options.step, function(i, value){

      var time =  value.time;                                                       
      timeouts.push(setTimeout(function(){

          alert('some action');

      },time*i));

  });

//重置按钮

  $('.stop').click(function(){
      $.each(timeouts, function (_, id) {
          clearTimeout(id);
      });
      timeouts = [];
  })

Answer 1

time*i - 这可能是你的问题。

以您提供的数据为例，您会得到以下时间：6000、3000、12000。

让我们将这些乘以i，你会得到0、3000、24000。

编辑： 正如下面的 cmets 中所建议的，您希望第一个值始终为零，而结果值则保持原样。

将超时延迟设置为i == 0 ? 0 : time 会起作用。

这基本上意味着expression ? true : false;

这是一个例子：http://jsfiddle.net/2ka9g/1/

Answer 2

我的主要猜测是您没有设置所需的计时器时间。您使用i * value.time 作为您的计时器时间，这看起来很奇怪。你是否意识到i 是你数组的索引，所以第一次它会是零，然后是 1，然后是 2，等等......

这将导致计时器时间为：0*6000, 1*3000, 2*12000，转换为 0, 3000, 24000。

这似乎不是你想要的。

此外，浏览器中的 Javascript 是单线程的（除了 webWorkers 和一些我们在这里不讨论的事件副作用）。因此，setTimeout() 不保证准确。如果在计时器事件触发时正在运行其他东西，则该计时器事件将进入事件队列，并将稍后在当前 Javascript 执行线程完成时运行。因此，setTimeout() 将不会按时运行，如果其他东西在它触发时正在运行。

Answer 3

您设置的时间间隔将为 0 秒 (6000 * 0)、3 秒 (3000 * 1) 和 24 秒 (24000 * 2)。这是因为您要乘以索引 (i)。这是您要达到的时间间隔吗？