Esegui lo script dopo un ritardo specifico utilizzando JavaScript

Question

Esiste un metodo JavaScript simile a jQuery delay() O wait() (per ritardare l'esecuzione di uno script per un periodo di tempo specifico)?

Answer 1

C'è quanto segue:

setTimeout(function, milliseconds);

funzione a cui può essere passato il tempo dopo il quale la funzione verrà eseguita.

Vedere: Finestra setTimeout() Metodo.

Answer 2

Giusto per aggiungere ciò che hanno già detto tutti gli altri setTimeout:Se in futuro desideri chiamare una funzione con un parametro, devi impostare alcune chiamate di funzione anonime.

È necessario passare la funzione come argomento affinché venga chiamata in seguito.In effetti questo significa senza parentesi dietro il nome.Quanto segue chiamerà immediatamente l'avviso e visualizzerà "Hello world":

var a = "world";
setTimeout(alert("Hello " + a), 2000);

Per risolvere questo problema puoi inserire il nome di una funzione (come ha fatto Flubba) oppure puoi utilizzare una funzione anonima.Se devi passare un parametro, devi utilizzare una funzione anonima.

var a = "world";
setTimeout(function(){alert("Hello " + a)}, 2000);
a = "Stack Overflow";

Ma se esegui quel codice noterai che dopo 2 secondi il popup dirà "Hello Stack Overflow".Questo perché il valore della variabile a è cambiato in quei due secondi.Per far sì che dica "Hello world" dopo due secondi, devi utilizzare il seguente snippet di codice:

function callback(a){
    return function(){
        alert("Hello " + a);
    }
}
var a = "world";
setTimeout(callback(a), 2000);
a = "Stack Overflow";

Aspetterà 2 secondi e poi apparirà "Hello world".

Answer 3

Giusto per espandere un po'...Puoi eseguire il codice direttamente nel file setTimeout chiamare, ma come @patrick dice che normalmente assegni una funzione di callback, come questa.Il tempo è di millisecondi

setTimeout(func, 4000);
function func() {
    alert('Do stuff here');
}

Answer 4

Se vuoi davvero avere un blocco (sincrono) delay funzione (per qualunque cosa), perché non fare qualcosa del genere:

<script type="text/javascript">
    function delay(ms) {
        var cur_d = new Date();
        var cur_ticks = cur_d.getTime();
        var ms_passed = 0;
        while(ms_passed < ms) {
            var d = new Date();  // Possible memory leak?
            var ticks = d.getTime();
            ms_passed = ticks - cur_ticks;
            // d = null;  // Prevent memory leak?
        }
    }

    alert("2 sec delay")
    delay(2000);
    alert("done ... 500 ms delay")
    delay(500);
    alert("done");
</script>

Answer 5

Devi usare setTimeout e passargli una funzione di callback.Il motivo per cui non puoi utilizzare sleep in JavaScript è perché nel frattempo bloccheresti l'intera pagina dall'fare qualsiasi cosa.Non è un buon piano.Utilizza il modello di eventi di Javascript e sii felice.Non combatterlo!

Answer 6

Puoi anche usare finestra.setInterval() per eseguire del codice ripetutamente a intervalli regolari.

Answer 7

In aggiunta ai commenti precedenti, vorrei dire quanto segue:

IL setTimeout() La funzione in JavaScript non sospende l'esecuzione dello script di per sé, ma dice semplicemente al compilatore di eseguire il codice in futuro.

Non esiste una funzione che possa effettivamente sospendere l'esecuzione incorporata in JavaScript.Tuttavia, puoi scrivere la tua funzione che esegue qualcosa come un ciclo incondizionato fino al raggiungimento del tempo utilizzando il metodo Date() funzione e aggiungendo l'intervallo di tempo necessario.

Answer 8

Se hai solo bisogno di testare un ritardo puoi usare questo:

function delay(ms) {
   ms += new Date().getTime();
   while (new Date() < ms){}
}

E poi se vuoi ritardare di 2 secondi fai:

delay(2000);

Potrebbe non essere il migliore per la produzione però.Maggiori informazioni su questo nei commenti

Answer 9

perché non puoi inserire il codice dietro una promessa?(ha scritto a memoria)

new Promise(function(resolve, reject) {
  setTimeout(resolve, 2000);
}).then(function() {
  console.log('do whatever you wanted to hold off on');
});

Answer 10

La risposta semplice è:

setTimeout(
    function () {
        x = 1;
    }, 1000);

La funzione sopra attende 1 secondo (1000 ms) quindi imposta x su 1.Ovviamente questo è un esempio;puoi fare tutto quello che vuoi all'interno della funzione anonima.

Answer 11

Mi è piaciuta molto la spiegazione di Maurius (risposta con il voto più alto) con i tre diversi metodi per chiamare setTimeout.

Nel mio codice desidero navigare automaticamente alla pagina precedente al completamento di un evento di salvataggio AJAX.Al completamento dell'evento di salvataggio viene visualizzata una leggera animazione nel CSS che indica che il salvataggio è riuscito.

Nel mio codice ho trovato una differenza tra i primi due esempi:

setTimeout(window.history.back(), 3000);

Questo non attende il timeout: back() viene chiamato quasi immediatamente, indipendentemente dal numero inserito per il ritardo.

Tuttavia, modificandolo in:

setTimeout(function() {window.history.back()}, 3000);

Questo fa esattamente quello che speravo.

Questo non è specifico dell'operazione back(), lo stesso accade con alert().Fondamentalmente con il alert() utilizzato nel primo caso il tempo di ritardo viene ignorato.Quando chiudo il popup, l'animazione per il CSS continua.

Pertanto, consiglierei il secondo o il terzo metodo descritto anche se si utilizzano funzioni integrate e non si utilizzano argomenti.

Answer 12

Avevo alcuni comandi Ajax che volevo eseguire con un ritardo intermedio.Ecco un semplice esempio di un modo per farlo.Sono pronto a essere fatto a pezzi per il mio approccio non convenzionale.:)

//  Show current seconds and milliseconds
//  (I know there are other ways, I was aiming for minimal code
//  and fixed width.)
function secs()
{
    var s = Date.now() + ""; s = s.substr(s.length - 5);
  return s.substr(0, 2) + "." + s.substr(2);
}

//  Log we're loading
console.log("Loading: " + secs());

//  Create a list of commands to execute
var cmds = 
[
    function() { console.log("A: " + secs()); },
    function() { console.log("B: " + secs()); },
    function() { console.log("C: " + secs()); },
    function() { console.log("D: " + secs()); },
    function() { console.log("E: " + secs()); },
  function() { console.log("done: " + secs()); }
];

//  Run each command with a second delay in between
var ms = 1000;
cmds.forEach(function(cmd, i)
{
    setTimeout(cmd, ms * i);
});

// Log we've loaded (probably logged before first command)
console.log("Loaded: " + secs());

Puoi copiare il blocco di codice e incollarlo in una finestra della console e vedere qualcosa come:

Loading: 03.077
Loaded: 03.078
A: 03.079
B: 04.075
C: 05.075
D: 06.075
E: 07.076
done: 08.076

Answer 13

La soluzione più semplice per chiamare la tua funzione con ritardo è:

function executeWithDelay(anotherFunction) {
    setTimeout(anotherFunction, delayInMilliseconds);
}

Answer 14

Come altri hanno già detto, setTimeout è la soluzione più sicura
Ma a volte non puoi separare la logica in una nuova funzione, quindi puoi utilizzare Date.now() per ottenere millisecondi ed eseguire tu stesso il ritardo....

function delay(milisecondDelay) {
   milisecondDelay += Date.now();
   while(Date.now() < milisecondDelay){}
}

alert('Ill be back in 5 sec after you click ok....');
delay(5000);
alert('im back ' +new Date());