Действия очереди (не эффекты), которые нужно выполнить через некоторое время.

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)
;

Вы также можете расширить jquery с помощью метода, аналогичного setTimeout:

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)
;

или для вызова с аргументами передайте аргументы в массиве:

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

Answer 2

Плагин jQuery FxQueues делает именно то, что вам нужно:

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