JavaScript：setTimeout不会暂停循环 [英] JavaScript: setTimeout doesn't pause the loop
本文介绍了JavaScript：setTimeout不会暂停循环的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要在循环中做一些延迟，每次经过一些数据（经过我的循环几个周期/迭代之后）发送到服务器。
I need to make some delays in my loop, every time after some amount of data (after a few cycles/iterations through my loop) is sent to the server.
从服务器发送数据和接收响应工作正常，但请求的循环延迟仍无效。
Sending data and receiving respond from the server works fine, but requested delays in loop still don't work.
非常感谢您的帮助。
编辑：代码已更改，请检查第三个答案（我的）。
Code was changed, please check the third answer (mine).
<!DOCTYPE html>
<html>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
var xhttp = [];
var code = [
"WOICEL0Q9P",
"ZJTS4GYJEJ",
"HJPMQOCX31",
"MP26N0BH01",
"7TJNYZIRJR",
"Z5MIDDG4N2",
"BX6MKYK0O7",
"KVFVH1ESQX",
"40ADY3ZBE5",
"V4NT360JR5",
"FDI8AFL680",
"ZH89N59XQR",
"M6OS2OX38H",
"D8O76YDLM0",
"86GBMJLIXY",
"1QRFVU26VK",
"HFUI9QV6DY",
"VN83OGR825",
"DDMPCBX2MF",
"2M3QFPI234"
];
var i = code.length;
var j = code.length;
var k = 5000;
var p = 0;
while (i--) {
var process = (function(i) {
if (p == 5) {
p = 0;
function func(i) {
xhttp[i] = new XMLHttpRequest();
xhttp[i].onreadystatechange = function() {
if (xhttp[i].readyState == 4 && xhttp[i].status == 200) {
if (i == j) {
document.getElementById("demo").innerHTML = code[i] + ": " + xhttp[i].responseText;
}
else {
document.getElementById("demo").innerHTML += "<br><br>" + code[i] + ": " + xhttp[i].responseText;
}
}
};
xhttp[i].open("POST", "https://www.example.com/services/postdata.svc", true);
xhttp[i].setRequestHeader("Host", "www.example.com");
xhttp[i].setRequestHeader("Accept", "application/json, text/javascript");
xhttp[i].setRequestHeader("Accept-Language", "cs,en-US;q=0.7,en;q=0.3");
xhttp[i].setRequestHeader("Accept-Encoding", "gzip, deflate, br");
xhttp[i].setRequestHeader("Content-Type", "application/json; charset=utf-8");
xhttp[i].setRequestHeader("Cache-Control", "no-cache");
xhttp[i].setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhttp[i].setRequestHeader("Referer", "https://www.example.com/postdata-test.htm");
xhttp[i].setRequestHeader("Content-Length", "37");
xhttp[i].setRequestHeader("Connection", "keep-alive");
xhttp[i].send('{"code":"'+code[i]+'","confirm":false}');
//console.log('hello - Test if delay is here');
p++;
}
setTimeout(func(i), k);
k += 5000;
}
else {
xhttp[i] = new XMLHttpRequest();
xhttp[i].onreadystatechange = function() {
if (xhttp[i].readyState == 4 && xhttp[i].status == 200) {
if (i == j) {
document.getElementById("demo").innerHTML = code[i] + ": " + xhttp[i].responseText;
}
else {
document.getElementById("demo").innerHTML += "<br><br>" + code[i] + ": " + xhttp[i].responseText;
}
}
};
xhttp[i].open("POST", "https://www.example.com/services/postdata.svc", true);
xhttp[i].setRequestHeader("Host", "www.example.com");
xhttp[i].setRequestHeader("Accept", "application/json, text/javascript");
xhttp[i].setRequestHeader("Accept-Language", "cs,en-US;q=0.7,en;q=0.3");
xhttp[i].setRequestHeader("Accept-Encoding", "gzip, deflate, br");
xhttp[i].setRequestHeader("Content-Type", "application/json; charset=utf-8");
xhttp[i].setRequestHeader("Cache-Control", "no-cache");
xhttp[i].setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhttp[i].setRequestHeader("Referer", "https://www.example.com/postdata-test.htm");
xhttp[i].setRequestHeader("Content-Length", "37");
xhttp[i].setRequestHeader("Connection", "keep-alive");
xhttp[i].send('{"code":"'+code[i]+'","confirm":false}');
p++;
}
})(i);
}
}
</script>
</body>
</html>
推荐答案
运行代码时，循环不会等待setTimeout，因为它是异步的。
when you run your code, while loop won't wait for setTimeout because it is async.
但你可以按照以下方式使你的代码工作。
but you can do following to make your code work.
var p = 0;
var k = 0;
var now = new Date();
var code = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
for (var index = 0; index < code.length; index++) {
(function(idx, timeout){
setTimeout(function(i) {
//write your code herei
console.log("printed after", (new Date() - now)/1000, " Seconds");
}, timeout, idx);
p++;
if(p==5){
p = 0;
k += 5000;
}
})(index, k);
}
以下是输出
printed after 0.006 Seconds
printed after 0.008 Seconds
printed after 0.008 Seconds
printed after 0.008 Seconds
printed after 0.008 Seconds
printed after 5.008 Seconds
printed after 5.008 Seconds
printed after 5.008 Seconds
printed after 5.008 Seconds
printed after 5.008 Seconds
printed after 10.007 Seconds
printed after 10.007 Seconds
printed after 10.007 Seconds
printed after 10.007 Seconds
printed after 10.007 Seconds
printed after 15.008 Seconds
printed after 15.008 Seconds
printed after 15.008 Seconds
printed after 15.008 Seconds
printed after 15.008 Seconds
这篇关于JavaScript：setTimeout不会暂停循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
