Ritardare l'esecuzione della funzione di Javascript

Question

Ho un ciclo jQuery. Ho provato a setTimeout come segue, ma questo non funziona poiché la funzione viene eseguita immediatamente.

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

function showDetails(dataitem)
{
...
}

La dimensione dell'array è di circa 20, quello che sto cercando di fare è distribuire le chiamate di funzione in un determinato lasso di tempo anziché immediatamente, qualche idea su come raggiungere questo obiettivo? Sono pronto a riscrivere e ristrutturare il modo in cui le funzioni vengono chiamate per farlo, qualsiasi aiuto sarebbe apprezzato.

Answer 1

È possibile utilizzare l'indice dell'array per calcolare l'intervallo dinamicamente:

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

Answer 2

Li esegui tutto Dopo 300 millisecondi. Invece, prova qualcosa di simile:

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

EDIT: Invece di creare 20 timer contemporaneamente, penso che sia meglio farlo uno per uno. La funzione dovrebbe essere:

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

E la prima chiamata può essere:

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

Questo assume myArray è un semplice array globale e gestirà un elemento e solo quindi chiama il prossimo elemento con ritardo.

Answer 3

Date un'occhiata al jQuery.queue([ queueName ], callback( next )). Ciò consente di mettere in coda le funzioni per essere chiamate ed è ciò che gli effetti di animazione di JQuery utilizzano internamente.

Sembra che desideri implementare una coda, anche se non è del tutto chiaro le tue intenzioni per farlo.

MODIFICARE: Relegando la tua domanda, penso che altre risposte corrispondano meglio a ciò che stai cercando, tuttavia ho pensato che ti mostrerei un esempio di come ottenere l'esecuzione ritardata delle funzioni con una coda personalizzata.

Un Esempio di come si potrebbe usare una coda.

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

Basta non usare $.each, ma qualcosa di simile:

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