Question

我正在尝试使用jQuery + JavaScript实现这一目标：

我有需要按顺序调用的命令/函数，它们之间有一点延迟。这些示例包括更改元素的css属性，显示隐藏其他元素等。

据我所知，JavaScript没有睡眠功能。所以我想知道jQuery是否有插件或支持此功能的东西？

基本上，像$(window).schedule(function() { /* do something here*/ }, 500);这样的函数会很好。这会将函数推入队列，并在队列中的所有先前函数执行后立即执行，如果队列中没有函数，则会立即执行。 integer参数指定此函数与之前的函数之间的延迟。

我想我知道如何从头开始构建这个，但我希望有一个插件，因为它将使我免于重新发明轮子。

如果没有..我将构建它并释放它。：）

Answer 1

我不知道已经存在的特定插件（虽然如果没有，我会感到惊讶）。但是如果你只是想要一个不与任何特定元素相关联的通用队列，那么在没有jQuery的情况下很容易做到，可能是这样的：

function Scheduler() {
    var queue = [],
        timer,
        next = function () {
            var item = queue.shift();
            if (item) {
                timer = setTimeout(function () {
                    item.cb.call(item.thisObj);
                    timer = null;
                    next();
                }, item.delay);
            }
        };
    this.schedule = function (delay, cb, thisObj) {
        queue.push({
            cb: cb,
            delay: delay,
            thisObj: thisObj
        });
        if (!timer) next();
        return this;
    };
}

var scheduler = new Scheduler();
scheduler.schedule(2000, function () {
    $("h1").css("color", "red");
});
scheduler.schedule(500, someFunc)
         .schedule(3000, someOtherFunc)
         .schedule(1500, anotherFunc);

主.schedule()方法返回调度程序的实例，因此您可以链接重复的调用，如图所示。您可以（可选）传递回调函数的上下文，如以下演示所示：http://jsfiddle.net/euggc0r2/1/

Answer 2

使用jQuery内置的queue()，dequeue()和delay()方法，如下所示：

$(function() {
    $('#yourElement')
        .queue('myQueue', function() {
            /* do stuff... */
            // ...then tell jQuery to run the next method
            // in the 'myQueue' queue in 2 seconds.
            $(this).delay(2000, 'myQueue').dequeue('myQueue'); 
        })
        .queue('myQueue', function() {
            /* do different stuff... */
            // ...then tell jQuery to run the next method
            // in the 'myQueue' queue in 2 seconds.
            $(this).delay(2000, 'myQueue').dequeue('myQueue'); 
        })
        ...
        ...
        ...
        .dequeue('myQueue'); // run the first function in the queue.
})();

通常，您会将所有功能排入队列，然后在完成所有功能时进行初始dequeue()来电。

jQuery函数调度功能

2 个答案: