Fügen Sie die Timeout / Sleep-Funktion in der Javascript-Schleife hinzu

Question

Ich versuche, eine Schlaf- / Verzögerungsfunktion in eine js-Datei einzufügen. Diese:

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

Ich möchte dieses Skript für 10 Sekunden pausieren und dann wieder Arbeit zu tun und dann wieder für 10 Sekunden Pause und tun wie diese , bis Textlänge größer thatn i in der Schleife! Mein Code funktioniert, wenn ich einmal ausgeführt werde, aber es funktioniert nicht, wenn ich in einer Schleife ausgeführt werde, da die Website eine Ratenbeschränkung in der API hat. Deshalb versuche ich, eine Schlaffunktion hinzuzufügen.

Also habe ich versucht, auf den Schlaf zu warten (); Methode und auch versucht setTimeout Methode, aber es funktioniert nicht wie erwartet in Sortierung, es funktioniert überhaupt nicht mit meinem Code!

warte auf Schlaf (); funktioniert einfach überhaupt nicht und zeigt msg wie Uncaught SyntaxError an: await ist nur in asynchronen Funktionen und asynchronen Generatoren gültig. webTestfile.js: 27

Answer 1

Sie können die Funktion von ES6 async/awaitnutzen !

Zur Verwendung awaitmuss es sich in einem deklarierten Funktions- / Ausdruckskörper befinden async.

Grundsätzlich wird Ihre Funktion dadurch asynchron und wartet darauf, dass eine Promiseerfüllt wird. Wir sorgen dafür, dass das Versprechen nach einer festgelegten Verzögerung erfüllt wird setTimeout().
Beachten Sie, dass "nach einer festgelegten Verzögerung" nicht "genau nach" bedeutet, sondern im Grunde "so früh wie möglich nach".

Auf diese Weise wartet die asynchrone Funktion auf die Erfüllung des Versprechens und gibt in der Zwischenzeit den Callstack frei, damit anderer Code ausgeführt werden kann.

Die Ausführungsreihenfolge dieses Beispiels ist (vereinfacht) wie folgt:

1. sleepingFunc() wird auf Callstack gelegt
   • In Iteration: Damit das awaitVersprechen erfüllt wird, wird dieser Anruf unterbrochen. Callstack wird freigegeben
2. Neue Anrufe auf Callstack tätigen
3. Schließlich wird das Versprechen erfüllt und der awaitRückruf auf dem Callstack beendet
4. Wiederholen, bis sleepingFunc()fertig

Wie Sie in Schritt 3 sehen können, muss der unterbrochene Anruf diese zusätzliche Zeit länger warten, wenn andere Anrufe mehr Zeit als die Verzögerung in Anspruch nehmen.

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

Dieses Snippet führt alle 1 Sekunde eine Aufgabe aus, bis die Bedingung erfüllt ist, und löscht dann den 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)