Dodaj funkcję Timeout / Sleep wewnątrz pętli javascript

Nov 24 2020

Próbuję dodać funkcję uśpienia / opóźnienia w pliku js, ten:

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

Chcę ten skrypt, aby wstrzymać na 10 sekund, a następnie ponownie wykonać pracę, a następnie ponownie wstrzymać na 10 sekundy i podoba mi się to aż długość tekstu jest większa thatn I w pętli! Mój kod działa, jeśli uruchamiam się pojedynczo, ale nie działa, jeśli działam w pętli, ponieważ witryna ma limit szybkości w interfejsie API , dlatego próbuję dodać funkcję uśpienia.

Więc to, czego próbowałem, to czekanie na sen (); metoda, a także wypróbowała metodę setTimeout , ale nie działa zgodnie z oczekiwaniami w sortowaniu, w ogóle nie działa z moim kodem!

czekaj na sen (); po prostu w ogóle nie działa i wyświetla komunikat taki jak Uncaught SyntaxError: await jest poprawny tylko w funkcjach asynchronicznych i generatorach asynchronicznych webTestfile.js: 27

Odpowiedzi

2 OskarGrosser Nov 25 2020 at 00:10

Można skorzystać z ES6 za async/await-feature !

Aby użyć await, musi znajdować się w zadeklarowanej treści funkcji / wyrażenia async.

Zasadniczo sprawi to, że twoja funkcja będzie asynchroniczna i sprawi, że będzie czekać na Promisewypełnienie a. Sprawiamy, że obietnica zostanie spełniona po określonym opóźnieniu za pomocą setTimeout().
Zauważ, że „po ustalonym opóźnieniu” nie oznacza „dokładnie po”, w zasadzie oznacza „jak najwcześniej po”.

W ten sposób funkcja asynchroniczna czeka na spełnienie obietnicy, zwalniając w międzyczasie stos wywołań, aby można było wykonać inny kod.

Kolejność wykonywania tego przykładu jest (uproszczona) następująca:

  1. sleepingFunc() jest umieszczony w stosie wywołań
    • W iteracji: awaitspełnienie Obietnicy, zawieszenie tego wywołania 🡒 zwalnianie stosu wywołań
  2. Nawiązuj nowe połączenia w stosie połączeń
  3. Ostatecznie Obietnica zostaje spełniona, kończąc awaitoddzwanianie zawieszone na stosie wywołań 🡒
  4. Powtarzaj, aż sleepingFunc()skończysz

Jak widać w kroku 3, jeśli inne połączenia zajmują więcej czasu niż opóźnienie, zawieszone połączenie będzie musiało czekać ten dodatkowy czas dłużej.

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

2 Jkarttunen Nov 24 2020 at 22:48

Spowoduje to uruchomienie fragmentu kodu, który uruchamia jedno zadanie co 1 sekundę, aż warunek zostanie spełniony, a następnie czyści licznik czasu.

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

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