在一段时间后执行排队操作(不是效果)。

时间:2008-09-18 00:55:27

标签: javascript jquery

我想知道的是,如果有一种很好的方法可以在一段时间后对jQuery函数进行排队。这不会暂停其他函数的执行,只会暂停链中的后续函数。也许我想象的一个例子可能会说明:

$('#alert')
    .show()
    .wait(5000)    // <-- this bit
    .hide()
;

我知道通过使用超时是可能的,但这似乎是一种混乱的方式,特别是与上面的例子相比(如果它是真的)。​​

那么,jQuery已经内置了这样的内容,如果没有,那么模拟它的最佳方式是什么?

2 个答案:

答案 0 :(得分:8)

你不能那样做,你可能不想这样做。虽然它看起来很漂亮,但Javascript中没有任何机制可以让你做到这一点,而不只是循环“等待”直到时间过去。你当然可以做到这一点,但你冒着严重降低浏览器性能的风险,如果你的超时时间超过几秒钟,浏览器会向用户显示你的javascript似乎被卡住的警告。

执行此操作的正确方法是超时:

var el = $('#alert');
el.show()
setTimeout(function() { el.hide() }, 5000);

你的另一个选择是扩展jquery,为你想要延迟的动作添加一个效果:

jQuery.fn.extend({
    delayedHide: function(time) {
        var self = this;
        setTimeout(function() { self.hide(); }, time);
    }
});

$('#alert')
    .show()
    .delayedHide(5000)
;

您还可以使用类似于setTimeout的方法扩展jquery:

jQuery.fn.extend({
    delayThis: function(fn, time, args) {
        var self = this;
        setTimeout(function() { jQuery.fn[fn].apply(self, args); }, time);
    }
});

$('#alert')
    .show()
    .delayThis('hide', 5000)
;

或用数组中的args传递参数调用:

$('#alert')
    .show()
    .delayThis('css', 5000, [ 'display', 'none' ])
;

答案 1 :(得分:1)

jQuery FxQueues plug-in正是您需要的:

$('#element').fadeOut({
    speed: 'fast',
    preDelay: 5000
});