Dodaj funkcję Timeout / Sleep wewnątrz pętli javascript
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
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:
sleepingFunc()
jest umieszczony w stosie wywołań- W iteracji:
await
spełnienie Obietnicy, zawieszenie tego wywołania 🡒 zwalnianie stosu wywołań
- W iteracji:
- Nawiązuj nowe połączenia w stosie połączeń
- Ostatecznie Obietnica zostaje spełniona, kończąc
await
oddzwanianie zawieszone na stosie wywołań 🡒 - 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();
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)