在一定时间后执行排队操作(非效果)。

时间:2020-03-06 14:19:34  来源:igfitidea点击:

我想知道的是,是否有一种很好的方法可以将jQuery函数排队一段时间后再执行。这不会暂停其他功能的执行,只会暂停该链中后面的功能。我可能会想到的一个示例可能会说明:

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

我知道可以通过使用超时来实现,但是这似乎是一种麻烦的方式,特别是与上述示例相比(如果它是真实的)。

那么,类似的东西已经内置在jQuery中了吗?如果没有,那么模仿它的最佳方法是什么?

解决方案

我们无法做到这一点,并且我们可能不想这样做。尽管看上去确实很漂亮,但是Javascript中没有机制可以让我们做到这一点,而不必循环进入" wait"直到时间过去。我们当然可以这样做,但是我们可能会冒着严重降低浏览器性能的风险,并且如果超时时间超过几秒钟,浏览器就会向用户显示警告,表明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' ])
;

jQuery FxQueues插件可以满足需求:

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