Verzögern Sie die Funktionsausführung von JavaScript

Question

Ich habe eine JQuery -Schleife, die eine Funktion mit einem Parameter pro Iteration aufruft. Gibt es eine Möglichkeit, diesen Funktionsaufruf zu verzögern? Ich habe SetTimeout wie im Folgenden ausprobiert, aber dies funktioniert nicht, da die Funktion sofort ausgeführt wird.

$.each(myArray, function (j, dataitem)
{
     setTimeout(function () { showDetails(dataitem) }, 300);
});

function showDetails(dataitem)
{
...
}

Die Arraygröße beträgt ungefähr 20, was ich versuche, Funktionen auf einen bestimmten Zeitrahmen zu verteilen, anstatt sofort zu erfüllen, wie man dies erreicht? Ich bin bereit, neu zu schreiben und umzustrukturieren, wie Funktionen aufgerufen werden, um dies zu erledigen. Jede Hilfe wird geschätzt.

Answer 1

Sie können den Index des Arrays verwenden, um das Intervall dynamisch zu berechnen:

$.each(myArray, function (j, dataitem) {
    window.setTimeout(function () { 
        showDetails(dataitem) 
    }, (j + 1) * 300);
});

Answer 2

Sie führen sie aus alle nach 300 Millisekunden. Probieren Sie stattdessen so etwas aus:

window.setTimeout(function () { showDetails(dataitem) }, (j + 1) * 300);

Bearbeiten: Anstatt 20 Timer gleichzeitig zu erstellen, denke ich, dass es besser ist, es einzeln zu machen. Funktion sollte sein:

function showDetails(index)
{
   if (index >= myArray.length)
      return false;
   var dataItem = myArray[index];
   //code here......
   //code here......
   //code here......
   windows.setTimeout(function() { showDetails(index + 1); }, 300);
}

Und der erste Anruf kann sein:

$(document).ready(function() {
{
   showDetails(0);
});

Dies geht davon aus myArray ist einfaches globales Array und behandelt einen Artikel und ruft erst dann den nächsten Artikel mit Verzögerung an.

Answer 3

Sich ansehen jQuery.queue([ queueName ], callback( next )). Auf diese Weise können Sie die Warteschlangenfunktionen aufgerufen und die Animationseffekte von JQuery intern verwenden.

Es hört sich so an, als würden Sie eine Warteschlange implementieren, obwohl es nicht ganz klar ist, dass Sie die Absichten dafür tun.

BEARBEITEN: Wenn Sie Ihre Frage erneut lesen, denke ich, dass andere Antworten besser entsprechen, was Sie suchen. Ich dachte jedoch, ich würde Ihnen ein Beispiel dafür zeigen, wie Sie eine verzögerte Funktionsausführung mit einer benutzerdefinierten Warteschlange erzielen können.

Ein Beispiel dafür, wie Sie eine Warteschlange verwenden können.

var myArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
    output = $('#output');

// set the queue up
$.each(myArray, function (j, dataitem) {
    output.queue('queue', function(next) {
        var that = this;
        showDetails(dataitem);  
        window.setTimeout(next,300);
    });
});

// start the queue running.
output.dequeue('queue');

function showDetails(dataitem) {
    output.append('<div>' + dataitem + '</div>');
}

Answer 4

Benutze einfach nicht $.each, aber so etwas wie:

var data = [1, 2, 3, 4, 5];

function showDetails(values, delay) {
  console.log(values.shift()); //show the value
  if (values.length) {
    setTimeout(function() {showDetails(values, delay); }, delay); //schedule next elem
  }
}

showDetails(data.slice(0), 300); //dont forget the slice, call-by-reference