1

我正在尝试遍历几个不同的值。这个想法是，如果用户单击一个按钮，循环应该开始运行，一旦它运行它应该显示一段代码（在示例中是一些基本文本）。我试图显示一种包含不同信息的对话框，持续时间取决于时间值（毫秒），所以第一个以 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 秒后运行，这意味着其余的将使用那里邻居的值。

4

3 回答 3

3

您的脚本设置了 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
});

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

（在 jsfiddle.net 上的演示）

于 2012-09-13T11:20:39.353 回答
0

这将遍历所有值，并且 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);
  });
于 2012-09-13T11:51:57.780 回答
0

我只想提供一种代码更少的替代方法。您只需要使用一个名为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();
}
于 2012-09-14T11:35:47.140 回答