我需要创建一个脚本，它将发布请求（数组中的数据）连续发送到服务器并获取响应，但我还需要延迟（大约3-5秒） 每次第5次或第6次迭代。例如：
1st data
2nd data
3rd data
4th data
5th data
** 5sec. delay - wait here**
6th data
7th data
...etc...
发送和接收数据没问题，但我无法在我的代码中正确实现setTimeout，以便在我需要时完全正常工作。
非常感谢大家，他们将能够修复此代码。
<!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>
答案 0 :(得分：5)
您可能想要使用setInterval（） 或者你必须递归调用setTimeout（）
(function func() {
//do your upload
setTimeout(func, 3);
})();
使用bind可以传递参数：
(function func(i) {
//do your upload
setTimeout(func.bind(this, i), 3);
})();
答案 1 :(得分：2)
这是一个完全有效的例子。查看注释并观察日志输出以了解它是如何记录的，这是非常明显的。
<!DOCTYPE html>
<html>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo">Loading...</p>
<script>
function loadDoc() {
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 pendingRequests = 0; // how many requests are waiting for a response\
var htmlBuffer = []; // best practice to build your html before inserting to save memory
// instead of using the closure inside the loop, just use a regular function
// this way you're not duplicating the code and you're keeping the logic clean
var makeRequest = function(i){
console.log("making a request");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (xhttp.readyState == 4 && xhttp.status == 200) {
//. add to the buffer
htmlBuffer.push(code[i]+": "+xhttp.responseText);
pendingRequests--;
console.log("request is back. "+pendingRequests+" requests still pending.");
if(pendingRequests===0){
// if there are no pending requests
if(i==0){
// if there are no more codes to send, put the thml in the dom
document.getElementById("demo").innerHTML = htmlBuffer.join('<br>');
}else{
// else wait 3 seconds and send the next 5 requests
console.log("waiting 3 seconds... "+i+" codes still need to be sent.");
setTimeout(doFiveRequests, 3000);
}
}
}
};
xhttp.open("POST", "https://www.example.com/services/postdata.svc", true);
xhttp.setRequestHeader("Host", "www.example.com");
xhttp.setRequestHeader("Accept", "application/json, text/javascript");
xhttp.setRequestHeader("Accept-Language", "cs,en-US;q=0.7,en;q=0.3");
xhttp.setRequestHeader("Accept-Encoding", "gzip, deflate, br");
xhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");
xhttp.setRequestHeader("Cache-Control", "no-cache");
xhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhttp.setRequestHeader("Referer", "https://www.example.com/postdata-test.htm");
xhttp.setRequestHeader("Content-Length", "37");
xhttp.setRequestHeader("Connection", "keep-alive");
xhttp.send('{"code":"' + code[i] + '","confirm":false}');
pendingRequests++;
};
// this function just calls the next 5 requests
var doFiveRequests = function(){
// make next 5 requests
for(var n=i-5; i>n&&i>-1; i--){
makeRequest(i);
}
};
// start the loop...
doFiveRequests();
} // end function
</script>
</body>
</html>
答案 2 :(得分：1)
这是因为您调用setTimeout函数的方式
通过以下方式调用setTimeout函数
setTimeout(func(i), k);
您实际上是将funct（i）的结果指定为setTimeout的回调
你应该像这样调用setTimeout
setTimeout(func.bind(this, i), k);
使用当前i变量