排队等待一段时间后执行的动作（不是效果）。

Posted 2023-05-08

【中文标题】排队等待一段时间后执行的动作（不是效果）。

【英文标题】：Queuing actions (not effects) to execute after an amount of time.

【发布时间】：2010-09-10 11:36:08

【问题描述】：

我想知道是否有一种很好的方法可以让 jQuery 函数在一定时间后执行。这不会暂停其他函数的执行，只会暂停链中后续函数的执行。也许我设想的一个例子可以说明：

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

我知道可以通过使用超时来实现，但这样做似乎很麻烦，尤其是与上面的示例相比（如果它是真实的）。

那么，这样的东西是否已经内置到 jQuery 中，如果没有，模拟它的最佳方法是什么？

【参考方案1】：

你不能这样做，而且你可能不想这样做。虽然它看起来确实很漂亮，但 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' ])
;

【讨论】：

嗨 Prestaul，感谢您的评论 - 我已经稍微编辑了这个问题，以澄清我不希望它“挂”浏览器这么长时间。

【参考方案2】：

jQuery FxQueues plug-in 可以满足您的需求：

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