在javascript循环中添加Timeout/Sleep函数

Question

我正试图在js文件中添加一个睡眠/延迟函数，这个：

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

我希望这个脚本暂停10秒，然后再次执行工作，然后再次暂停10秒并这样做，直到循环中的文本长度大于nI！如果我运行一次，我的代码就可以工作，但如果我在循环中运行，它就不起作用，因为网站在api中有速率限制，所以这就是我试图添加睡眠功能的原因。

所以我尝试了等待睡眠()方法，还尝试了setTimeout方法，但它在排序中没有按预期工作——它根本不适用于我的代码！

等待睡眠()；只是根本不起作用，并显示类似的消息未捕获的SyntaxError:await仅在异步函数和异步生成器webTestfile.js:27中有效

Answer 1

您可以使用ES6的async/await-功能！

要使用await，它需要位于声明为async的函数/表达式体中。

基本上，这将使您的函数异步，并使其等待Promise的实现。我们使用setTimeout()在设定的延迟后实现该承诺
注意；在设定的延迟"之后；并不意味着"；恰好在"之后；，它基本上意味着"；在"之后尽早"；。

通过这样做，异步函数将等待promise的实现，同时释放调用堆栈，以便执行其他代码。

这个例子的执行顺序(简化)如下：

1. sleepingFunc()被放置在调用堆栈上
   • 在迭代中：await用于Promise的实现，挂起此调用以释放调用堆栈
2. 在调用堆栈上放置新调用
3. 最终，Promise实现，结束await在callstack上放置挂起的回调
4. 重复，直到sleepingFunc()完成

如您在步骤3中看到的，如果其他呼叫占用的时间超过延迟，则挂起的呼叫将不得不等待更长的时间。

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

这个运行代码段每1秒运行一个任务，直到满足条件，然后清除计时器。

const work = (i)=>{
console.log('doing work here ', i);
}
let counter = 0
const timer = setInterval(()=>{
if (timer && ++counter >= 10) {
clearInterval(timer)
}
work(counter);
}, 1000)