JavaScript-在页面中使用多个jquery 的 delay() 方法设置不同的时间,为什么达不到预期的效果?

JavaScript-在页面中使用多个jquery 的 delay() 方法设置不同的时间,为什么达不到预期的效果?

晚风撩人 发布于 2017-06-20 字数 327 浏览 1082 回复 2

代码如下:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<div id='test' style="display:none">test</div>
<div id='test1' style="display:none">test1</div>

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

灵芸 2017-10-18 2 楼

jquery的delay一般适用动画淡入淡出等对时间要求不是很精确的队列项目,它并不能完全取代JavaScript原生的setTimeout函数,后者更适用于通常情况。

夜无邪 2017-08-16 1 楼

先看看这里JQuery的delay()方法的源码:

 delay: function( time, type ) {
time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
type = type || "fx";

return this.queue( type, function( next, hooks ) {
var timeout = setTimeout( next, time );
hooks.stop = function() {
clearTimeout( timeout );
};
});
},

可以看到它实际上是将一个setTimeout()函数加入队列中,所以这就能解释你的第一段代码为什么达不到预期的效果了。

  $("#test").delay(2000).show(1); //2秒钟之后显示
console.log(new Date());
$("#test").delay(5000).hide(1); //显示3秒钟隐藏
console.log(new Date());
$("#test1").delay(7000).show(1); //2秒钟之后显示
console.log(new Date());
$("#test1").delay(10000).hide(1); //显示3秒钟隐藏
console.log(new Date());

由于在两个相同的对象上(也就是两个$('#test')),由于是在队列中,所以它的执行时间是需要叠加的,所以$("#test").delay(5000).hide(1);就需要在7秒后隐藏,类似的$("#test1")也需要在17秒后隐藏。不知道这样是不是解释清楚了。

所以,如果要达到第二段的setTimeout()那样的效果,就需要将代码改成如下:

 $("#test").delay(2000).show(1); //2秒钟之后显示
console.log(new Date());
$("#test").delay(3000).hide(1); //显示3秒钟隐藏
console.log(new Date());
$("#test1").delay(7000).show(1); //2秒钟之后显示
console.log(new Date());
$("#test1").delay(3000).hide(1); //显示3秒钟隐藏
console.log(new Date());

这样就一样了。