Anwenden Verzögerung zwischen jeder Iteration von jQuery .each() -Methode

Question

einige Probleme mit dem folgenden Code-Block zu haben:

 $('.merge').each(function(index) { 
      var mergeEl = $(this); 
      setTimeout(function() { 
       self.mergeOne(mergeEl, self, index - (length - 1)); 
      }, 500); 
     }); 

ich eine 0,500 Sekunden Verzögerung zwischen jedem Aufruf von mergeOne anwenden bin versucht, aber Dieser Code gilt nur für eine Verzögerung von 0,500 Sekunden vor dem gleichzeitigen Aufruf von mergeOne an allen Elementen im Array.

Wenn jemand erklären könnte warum dieser Code funktioniert nicht und möglicherweise eine funktionierende Lösung, die wäre super, danke!

Answer 1

Hier ist eine allgemeine Funktion, die Sie zwischen jeder Iteration Iteration durch eine Sammlung von jQuery-Objekt, mit einer Verzögerung verwenden können:

function delayedEach($els, timeout, callback, continuous) { 
    var iterator; 

    iterator = function (index) { 
     var cur; 

     if (index >= $els.length) { 
      if (!continuous) { 
       return; 
      } 
      index = 0; 
     } 

     cur = $els[index]; 
     callback.call(cur, index, cur); 

     setTimeout(function() { 
      iterator(++index); 
     }, timeout); 
    }; 

    iterator(0); 
} 

DEMO:http://jsfiddle.net/7Ra9K/ (Schleife einmal durch)

DEMO:http://jsfiddle.net/42tXp/ (Endlosschleife)

Der Kontext und die Argumente, die an Ihren Callback übergeben werden, sollten identisch sein a s wie .each() tut es.

Wenn Sie es ein jQuery-Plugin machen wollen, so kann es wie $("selector").delayedEach(5000, func... genannt werden, dann könnten Sie verwenden:

$.fn.delayedEach = function (timeout, callback, continuous) { 
    var $els, iterator; 

    $els = this; 
    iterator = function (index) { 
     var cur; 

     if (index >= $els.length) { 
      if (!continuous) { 
       return; 
      } 
      index = 0; 
     } 

     cur = $els[index]; 
     callback.call(cur, index, cur); 

     setTimeout(function() { 
      iterator(++index); 
     }, timeout); 
    }; 

    iterator(0); 
}; 

DEMO:http://jsfiddle.net/VGH25/ (Schleife einmal durch)

DEMO:http://jsfiddle.net/NYdp7/ (continuous Looping)

---

UPDATE

Ich fügte die Fähigkeit hinzu, die Elemente als zusätzlichen Parameter kontinuierlich durchzulaufen. Vorbei true wird kontinuierlich Schleife, während false oder nichts vorbei (oder etwas Falsey) wird, sobald die Elemente nur eine Schleife über. Der Code und die Fiddle enthalten die Änderungen.