JavaScript: setTimeout не останавливает цикл

Мне нужно сделать некоторые задержки в моем цикле, каждый раз после того, как некоторый объем данных (после нескольких циклов/итераций через мой цикл) отправляется на сервер.JavaScript: setTimeout не останавливает цикл

Отправка данных и получение ответа от сервера выполняется нормально, но запрошенные задержки в цикле все еще не работают.

Большое спасибо за помощь.

EDIT: Код был изменен, пожалуйста, проверьте третий ответ (мой).

<!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>

источник

2016-08-01 Filip CZ

Вы постоянно порождая несколько вызовов process() непосредственно в while, а затем говорить process подождать 5 секунд, прежде чем произойдет, что обратный вызов.

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

источник

2016-08-01 16:15:49 zero298

Благодарим за помощь, но могу ли я попросить вас внести исправления в свой код? У меня все еще нет большого опыта в программировании JavaScript. –

Я скорректировал скобки в моем коде, когда вы разместили, и я просто сохранил декрементный цикл while, но скрипт теперь не работает. Я получил эту ошибку в консоли: Uncaught TypeError: Не могу прочитать свойство «readyState» undefined –

при запуске кода, в то время как цикл не будет ждать setTimeout, поскольку он является асинхронным.

но вы можете сделать следующее, чтобы ваш код работал.

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

источник

2016-08-01 16:27:20

Спасибо, сурах, я проверю ваш код сразу. –

Не работает человек, Uncaught ReferenceError: k не определен –

попробуйте сейчас, я отредактировал код –

ОК, так что я попытался сделать некоторую коррекцию inspirated ответом Сураджа, но до сих пор не повезло. Все запросы по-прежнему отправляются сразу после нажатия кнопки, после 5-6 итераций через цикл нет задержки.

Пожалуйста, проверьте мой код в любом случае, проблема должна быть где-то рядом с 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>

источник

2016-08-02 16:37:05

JavaScript: setTimeout не останавливает цикл

ответ

Смежные вопросы