JQuery функции планирования функции

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(), когда все будет готово.