jQuery:循环一个具有不同超时值的循环

jQuery: loop a loop with different timeout values

本文关键字：循环 超时 一个 jQuery      更新时间：2023-09-26

我正在尝试循环使用几个不同的值。其想法是，如果用户单击按钮，循环应该开始运行，一旦运行，它应该显示一段代码（在示例中是一些基本文本）。我试图显示一种具有不同信息的对话框，持续时间取决于时间值（毫秒），所以第一个对话框以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 = [];
  });

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

你的脚本设置了3个暂停：Mike在3秒，John在8秒，Jessica在2秒，所以Jessica是第一个。如果你想让它们一次发生一个，你需要积累这些时间：

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
});

（jsfiddle.net演示，立即启动）

另一种方式是一旦发生下一次超时就开始，这将允许更容易地停止&go：

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);
}

（jsfidd.net上的演示）

这将遍历所有值，setTimeout将根据数据中的时间调用函数wrt。"停止"变量应该是一个全局变量，它将充当你的终止开关

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);
  });

我只想用更少的代码提供一种替代方法。您只需要使用一个名为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();
}
相关文章：