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.
Thanks a lot for your help.
EDIT: 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>
You are continuously spawning multiple calls to process() immediately in the while and then telling process to wait 5 seconds before that callback happens.
// Run this loop over and over again
while (true) {
// Create a function called process that process data
var process = (function () {
// Do something with data
console.log("Something");
// Wait a few seconds and do it again
setTimeout(process, 5000);
// This () right here says call process right now
}());
}
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);
}
Following is the output
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
来源：https://stackoverflow.com/questions/38703456/javascript-settimeout-doesnt-pause-the-loop