JavaScript: setTimeout in Schleife funktioniert immer noch nicht

Ich musste ein Skript erstellen, die Postanforderungen sendet (Daten im Array) kontinuierlich Server und Antworten bekommen, aber ich muss auch Verzögerungen machen (für etwa 3 -5 Sekunden) zwischen alle 5. oder 6. Iteration. Als Beispiel:JavaScript: setTimeout in Schleife funktioniert immer noch nicht

1st data 
2nd data 
3rd data 
4th data 
5th data 
** 5sec. delay - wait here** 
6th data 
7th data 
...etc...

Senden und Empfangen von Daten sind in Ordnung, aber ich kann nicht richtig SetTimeout in meinem Code implementieren vollständig zu arbeiten, wie ich brauche.

Vielen Dank an alle, die diesen Code beheben können.

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

Quelle

2016-08-02 Filip CZ

Wenn Sie kontinuierliche Anfragen wünschen, warum nicht einfach 'setInterval' verwenden? – Li357

Mögliches Duplikat der [setTimeout() Methode innerhalb einer while-Schleife] (http://stackoverflow.com/questions/37728184/settimeout-method-inside-a-while-loop) –

Wie könnte diese Lösung mit setInterval aussehen, bitte? Ich habe keine andere Idee an diesem Punkt, wie man mein Problem löst ... –

Dies ist ein voll funktionsfähiges Beispiel. Sehen Sie sich die Kommentare an und sehen Sie sich die Log-Ausgabe an, um zu verstehen, wie es funktioniert, es ist ziemlich selbsterklärend.

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

Quelle

2016-08-02 17:53:25

Sie wollen wahrscheinlich setInterval() oder Sie verwenden setTimeout rekursiven nennen()

(function func() { 
    //do your upload 
    setTimeout(func, 3); 
})();

mit binden Sie Parameter übergeben können:

(function func(i) { 
    //do your upload 
    setTimeout(func.bind(this, i), 3); 
})();

Quelle

2016-08-02 16:57:45

Könnten Sie mir bitte diese Lösung mit setInterval zeigen? Versucht dies, aber immer noch keine Verzögerungen (alle Anfragen werden sofort nach dem Anklicken gesendet) –

var interval = setInterval (funktion() { func (i--); if (! I) clearInterval (intervall); }, 3) ; Sie brauchen nicht die while-Schleife dann –

wegen Dies ist die Art, wie Sie Ihre anrufen, rufen die setTimeout-Funktion

durch Aufruf die setTimeout-Funktion in der folgenden Art und Weise

setTimeout(func(i), k);

Sie sind das Ergebnis von Funkt (i) tatsächlich die Zuweisung als Callback für Ihre SetTimeout

sollten Sie die setTimeout wie so nennen

setTimeout(func.bind(this, i), k);

Welche wird die func-funktion mit dem aktuellen kontext dazu aufrufen, mit der aktuellen i variabel

Quelle

2016-08-02 16:59:37 Icepickle

Nun, ich ersetzte meine setTimeout .. Zeile mit Ihrem (das zweite), aber immer noch alle Anfragen werden sofort an den Server gesendet, keine Verzögerungen, wie ich brauche. Irgendeine andere Lösung bitte? Ich habe zur Zeit keine Ahnung. –

@FilipCZ das könnte wegen Ihrer if-Anweisung sein, wo Sie überprüfen, ob p == 5 (was ich denke, wo Sie die setTimeout verwenden), und Sie fügen auch p von innerhalb der Funktion, wie in der else-Anweisung, vielleicht Sie sollten debuggen, wie oft Sie tatsächlich Ihren Code schlagen, wo Sie das setTimeout tun – Icepickle

Ok thx, für Hinweis, werde ich versuchen, einige Änderungen dort zu tun ... –

Naja, probier das, aber ohne suc cess ...

 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'); 
      p++; 
     } 
     //setTimeout(func(i), k); 
     setTimeout(func.bind(func(i), i), k); 
     k += 5000;

Quelle

2016-08-02 17:13:37

JavaScript: setTimeout in Schleife funktioniert immer noch nicht

Antwort

Verwandte Themen