jQuery:循环一个具有不同超时值的循环
jQuery: loop a loop with different timeout values
我正在尝试循环使用几个不同的值。其想法是,如果用户单击按钮,循环应该开始运行,一旦运行,它应该显示一段代码(在示例中是一些基本文本)。我试图显示一种具有不同信息的对话框,持续时间取决于时间值(毫秒),所以第一个对话框以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();
}
相关文章:
- 使用javascript和随机暂停/超时快速循环文本
- 如何循环设置超时函数
- Confusing For循环内部有超时和关闭
- 设置超时可以保存我的循环函数不被视为无响应
- JavaScript set 超时循环返回值
- 设置超时在循环时执行
- 在继续循环之前完成设置超时
- 具有超时的循环函数
- 如何使用超时功能进行无限循环
- JavaScript 设置超时在循环和重复
- Javascript 在 for 循环中设置了超时函数
- while循环中的Javascript同步超时
- 更改图像超时循环 Javascript
- 在 JS 中的 while 循环中设置超时
- 创建循环设置超时 jquery 数组
- for循环,回调,一起超时,超时似乎不起作用
- for 循环中的设置超时不起作用
- JavaScript 清除循环中的超时
- casperjs无限循环超时未等待
- Javascript中的循环超时