Jquery:无限循环和暂停
Jquery: Infinite loop and pause
我有这个代码
var timeout = 0;
$('#container td').each(function(){
var td = this;
setTimeout(function() {
var new_text = $(td).find(text).html();
popup_text.html(new_text);
popup.fadeIn('fast').delay(1000).fadeOut('slow');
}, timeout);
timeout += 1000 + 1000;
});
我从表格单元格中获取文本,并延迟显示在图层中。1个问题:如何使此代码在无休止的循环中运行?2个问题:当你将鼠标悬停在popop循环上时,如何做到这一点?popop循环暂时停止,然后继续?非常感谢!
一种方法是将要重复的代码放在函数中,并让函数在末尾重复:
var timeout = 1000;
var action = function() {
// Do stuff here
setTimeout(action, timeout);
};
action();
然而,正如ahren所建议的,setInterval可能更好:
var timeout = 1000;
var action = function() {
// Do stuff here
};
setInterval(action, timeout);
差异很小,但如果机器由于某种原因运行缓慢,则setInterval版本将平均每秒运行一次代码,而setTimeout版本最多每秒运行一一次代码。
然而,这两种方法都不能很好地与each()配合使用,因此您需要将弹出窗口的序列存储在某个位置并逐步执行:
var timeout = 1000;
var tds = $('#container td');
var index = 0;
var action = function() {
var td = tds[index];
var new_text = $(td).html();
popup.html(new_text);
popup.fadeIn('fast').delay(1000).fadeOut('slow');
if(++index >= tds.length)
index = 0;
};
setInterval(action, timeout);
action();
最后,为了避免在弹出窗口悬停时移动到下一个弹出窗口,您可以在功能开始时添加一个复选框。还需要重新排列动画,使其"检查悬停-淡出-更改文本-淡入"。
var timeout = 1000;
var tds = $('#container td');
var index = 0;
var action = function() {
if(popup.is(':hover'))
return;
var td = tds[index];
var new_text = $(td).html();
popup.fadeOut('slow', function() {
popup.html(new_text);
}).fadeIn('fast');
if(++index >= tds.length)
index = 0;
};
setInterval(action, timeout);
action();
jsFiddle:http://jsfiddle.net/qWkYE/2/
如果你喜欢简短的清理方式,那么使用jquery计时插件并编写:
$.fn.waitNoHover = function(){
return this.is(':hover') ? this.wait('mouseleave') : this;
};
$('#popups div').repeat().each($).fadeIn('fast',$)
.wait(200).waitNoHover().fadeOut('slow',$).all()
请在上查看http://jsfiddle.net/creativecouple/fPQdU/3/
相关文章:
- 使用滚动溢出-x进行无限循环
- 从index.html调用函数,该函数无限循环
- 使用jQuery无限循环播放HTML页面幻灯片
- Grunt任务没有加载,获得无限循环
- 如何在不进入无限循环的情况下将网站重定向到Facebook画布URL
- Backbone+RequireJS+Mediator模式导致视图逻辑短路和无限循环
- jQuery无限循环,动画化许多项目
- 如何避免试图用php+jquery显示php起始页的无限循环
- 6502仿真增强型基本无限循环$C000至$E0ED
- Angular ngRoute导致无限循环和堆栈溢出
- Jquery:无限循环和暂停
- 数组数组:无限循环
- MeteorJS使用流星调用和流星方法时的无限循环
- 如何无限循环数据集字符串
- jquery在无限循环中运行
- 遍历对象会导致无限循环
- 为什么内部Javascript循环会阻止外部循环中断(即无限循环)
- 角度编译指令似乎进入了无限循环
- 显示随机数js的无限循环
- 无限循环的垂直滑块,没有暂停