Question

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

我必须进行更改，以便每个循环的时间都不同。下面的例子有一个kill开关，所以我可以杀死循环。我希望有人可以解决这个问题，我已经尝试了很多时间和小时。

//插件选项

  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秒后运行，这意味着其余的将使用邻居的价值。

Answer 1

你的脚本设置3次超时：3s显示Mike，8s显示John，2s显示Jessica - 所以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
});

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

另一种方法是在刚刚出现时启动下一个超时，这样可以更容易地停止＆amp; 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);
}

（Demo at jsfiddle.net）

Answer 2

这将循环遍历所有值，并且setTimeout将函数wrt调用到数据中的时间。 'stop'变量应该是一个全局变量，它将作为你的kill开关

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

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

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

3 个答案: