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

Question

我想知道是否有一种很好的方法可以将 jQuery 函数排入队列，以便在设定的时间后执行。这不会暂停其他功能的执行，只是链中后面的功能。也许我设想的一个例子可以说明:

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

我知道使用超时是可能的，但看起来这是一种困惑的方式，尤其是与上面的例子相比(如果它是真实的)。

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

Answer 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' ])
;