Aggiungi la funzione Timeout / Sleep all'interno del loop javascript

Question

Sto cercando di aggiungere una funzione sleep / delay all'interno di un file js, questo:

var webTest = function()
{

let regex = /^https?:\/\//;
let url = $('#list_urls').val().split('\n');
var xmlhttp = [], i;
var myObj2 = [], i;
 for(let i = 0; i < url.length; i++)
    {
    (function(i) {
    xmlhttp[i] = new XMLHttpRequest();
    url[i] = url[i].replace(regex, '');
    xmlhttp[i].open("GET", "https://website.com/API?key=<MY_API_KEY>&url="+url[i], false);
    xmlhttp[i].onreadystatechange = function() {
      if (xmlhttp[i].readyState === 4 && xmlhttp[i].status === 200) {
        myObj2 = JSON.parse(xmlhttp[i].responseText);
        document.getElementById("demo"+i).innerHTML = myObj2.results[1].categories;
      }
    };
xmlhttp[i].send();
})(i);
console.log(`The Server2: `+ myObj2);
 }
}

Voglio questo script per mettere in pausa per 10 secondi e poi di nuovo fare il lavoro e poi di nuovo una pausa di 10 secondi e piace questa lunghezza del testo fino a è maggiore thatn ho in loop! Il mio codice funziona se eseguo una sola volta ma non funziona se corro in loop perché il sito web ha un limite di velocità nell'API, quindi è per questo che sto cercando di aggiungere una funzione di sospensione.

Quindi quello che ho provato è wait sleep (); e ho anche provato il metodo setTimeout ma non funziona come previsto in sort non funziona affatto con il mio codice!

attendere il sonno (); semplicemente non funziona affatto e visualizza msg come Uncaught SyntaxError: await è valido solo nelle funzioni async e nei generatori async webTestfile.js: 27

Answer 1

Si può fare uso di di ES6 async/await-feature !

Per essere utilizzato await, deve trovarsi in un corpo di funzione / espressione dichiarato async.

Fondamentalmente, questo renderà la tua funzione asincrona e la farà aspettare Promiseche venga soddisfatta. Facciamo in modo che la promessa venga mantenuta dopo un determinato ritardo utilizzando setTimeout().
Notare che "dopo un determinato ritardo" non significa "esattamente dopo", ma in pratica significa "il prima possibile dopo".

In questo modo, la funzione asincrona attende che la promessa venga mantenuta, liberando nel frattempo lo stack di chiamate in modo che sia possibile eseguire altro codice.

L'ordine di esecuzione di questo esempio è (semplificato) il seguente:

1. sleepingFunc() viene posizionato sullo stack di chiamate
   • In iterazione: awaitper mantenere la promessa, sospendere questa chiamata 🡒 liberando stack di chiamate
2. Effettua nuove chiamate nello stack di chiamate
3. Alla fine, la promessa viene mantenuta, terminando await🡒 rimetti la chiamata sospesa nello stack di chiamate
4. Ripeti fino al sleepingFunc()termine

Come puoi vedere nel passaggio 3, se altre chiamate richiedono più tempo del ritardo, la chiamata sospesa dovrà attendere quel tempo extra più a lungo.

function sleep(ms) {
  return new Promise(resolveFunc => setTimeout(resolveFunc, ms));
}

async function sleepingFunc() {
  for (let i = 0; i < 5; ++i) {
    console.log(i + " - from sleep");
    await sleep(1000);
  }
}

function synchronousFunc() {
  for (let i = 0; i < 5; ++i) {
    console.log(i + " - from sync");
  }
}

sleepingFunc();
synchronousFunc();

Answer 2

Questo esegue lo snippet esegue un'attività ogni secondo fino a quando la condizione è soddisfatta, quindi azzera il timer.

const work = (i)=>{
 console.log('doing work here ', i);
}

let counter = 0
const timer = setInterval(()=>{
  if (timer && ++counter >= 10) {
   clearInterval(timer)
  }
  work(counter);
}, 1000)