jQuery：使用不同的超时值循环循环答案

【问题标题】：jQuery: loop a loop with different timeout valuesjQuery：使用不同的超时值循环循环
【发布时间】：2012-09-06 11:08:34
【问题描述】：

我正在尝试遍历几个不同的值。这个想法是，如果用户单击一个按钮，循环应该开始运行，一旦它运行它应该显示一段代码（在示例中是一些基本文本）。我试图显示一种包含不同信息的对话框，持续时间取决于时间值（毫秒），所以第一个以 3 秒开始，之后第二个应该可见 8 秒，之后最后一个应该运行 2 秒。

我必须进行更改，以便每个循环的时间都不同。下面的示例有一个终止开关，因此我可以终止循环。我希望有人能解决这个问题，我已经尝试了很多小时。

//插件选项

  step:[
      {
          time: 3000,
          name: 'mike',
          age: 30
      },
      {
          time: 8000,
          name: 'john',
          age: 37
      },
      {
          time: 2000,
          name: 'jessica',
          age: 25
      }
  ]

// 循环

  var timeouts = [];

$('.click').click(function(){
  $.each(options.step, function(i, value){

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

          $('#target ul').append('<li>'+value.name+'-'+value.age+'</li>')

      },time));

  });

 });

// 重置按钮

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

编辑：问题是循环中需要一个额外的值（0）（第一个值应该是 0），因为第一个 setTimeout 在 3 秒后运行，这意味着其余的将使用邻居的价值。

【问题讨论】：

标签： javascript jquery loops settimeout

【解决方案1】：

您的脚本设置了 3 次超时：在 3 秒内显示迈克，在 8 秒内显示约翰，在 2 秒内显示杰西卡 - 所以杰西卡是第一个。如果您希望它们一次发生一个，则需要累积这些时间：

var timeouts = [],
    accum = 0;
$.each(options.step, function(i, value){
    accum += value.time;                                                        
    timeouts.push(setTimeout(function(){
        $('#target ul').append('<li>'+value.name+'-'+value.age+'</li>')
    }, accum));
    // move the addition here if you want them to start immediately
});

（Demo at jsfiddle.net，立即开始）

另一种方法是在下一次超时发生后开始下一次超时，这样可以更轻松地停止&继续：

var cur = 0,
    $ul = $('#target ul'),
    tid;
function next() {
    if (cur >= options.step.length) return; // and call a final callback?
    var value = options.step[cur];
    $ul.append('<li>'+value.name+'-'+value.age+'</li>');
    cur++;
    tid = setTimeout(next, value.time);
}
function stop() {
    clearTimeout(tid);
}

(Demo at jsfiddle.net)

【讨论】：

谢谢，但这不起作用，很好，但时间不正确。它在显示第一个之前等待 3 秒（示例是 3 秒，我的测试是多一点）
那在评论里——把累积移到超时后面，那么第一个超时时间为零。
试过了，但是没有启动，还是使用了错误的时间值
找到了我认为的解决方案，应该在数组的开头插入一个额外的值 0（或它的调用方式）
嗯，工作表。请参阅我链接的演示（不，您不应该在步骤数组中需要 0 值）

【解决方案2】：

这将遍历所有值，并且 setTimeout 将调用函数 wrt 到数据中的时间。 'stop' 变量应该是一个全局变量，它将充当您的终止开关

var stop=0;

$('.stop').click(function(){
     stop=1;
  });
function responseFunction(value)
{
    if(!stop)
   alert(value.name+" "+value.age);
   else return;
}
 $.each(step, function(i, value){
    setTimeout(function(){
                        responseFunction(value);
                        },value.time);
  });

【讨论】：

这会给我同样的问题，我遇到的问题是时间不正确，它应该直接开始，但我没有，因为有一个 tiemout .所以我必须在循环中插入一个额外的时间值，我认为值为 0
所以你是说超时值不起作用..对吗？

【解决方案3】：

我只是想提供一种代码更少的替代方法。您只需要使用一个名为jquery-timing 的插件。它使 jQuery 中的计时事情变得更容易。

$('#target ul').repeat().wait(function(i) {
   this.append('<li>'+options.step[i].name+'-'+options.step[i].age+'</li>');
   return options.step[i].time;
}).until(options.step.length);

function stop() {
   $('#target ul').unwait();
}

由于我是干净代码的好朋友，这里再次完全相同。但这次使用命名函数而不是匿名函数：

$('#target ul').repeat(addCodeStep).wait(stepTimeout).until(options.step.length);

function addCodeStep(i) {
   this.append('<li>'+options.step[i].name+'-'+options.step[i].age+'</li>');
}

function stepTimeout(i) {
   return options.step[i].time;
}

function stop() {
   $('#target ul').unwait();
}

【讨论】：