Dormez dans javascript for-loop

Question

J'essaie de créer un compteur qui se met à jour toutes les secondes. J'ai fait une fonction backend qui revient toutes les 30 secondes, qui est appelée avec Ajax. Le résultat de l'appel est divisé par 30 et devrait alors mettre à jour le compteur toutes les secondes pendant 30 secondes. Comment pourrais-je faire pour dormir dans la boucle for?

Ceci est mon code à ce jour:

function getCount() { 
    $.ajax({ 
     url: '@Url.Action("", "", new {area = ""})', 
     type: 'POST', 
     success: function (data) { 
      var newTotalCount = data.totalCount; 
      var newDanishCount = data.danishCount; 
      var newNorwayCount = data.norwayCount; 
      var newSwedenCount = data.swedenCount; 
      var newUsCount = data.usCount; 

      var currentTotalCount = $("#odoTotal").text().replace(/,/g, "").replace(/(\r\n|\n|\r)/gm, ""); 
      var currentDanishCount = $("#odoDk").text().replace(/,/g, "").replace(/(\r\n|\n|\r)/gm, ""); 
      var currentNorwayCount = $("#odoNo").text().replace(/,/g, "").replace(/(\r\n|\n|\r)/gm, ""); 
      var currentSwedenCount = $("#odoSe").text().replace(/,/g, "").replace(/(\r\n|\n|\r)/gm, ""); 
      var currentUsCount = $("#odoUs").text().replace(/,/g, "").replace(/(\r\n|\n|\r)/gm, ""); 

      var updateTotalCount = newTotalCount - currentTotalCount; 
      var updateDanishCount = newDanishCount - currentDanishCount; 
      var updateNorwayCount = newNorwayCount - currentNorwayCount; 
      var updateSwedenCount = newSwedenCount - currentSwedenCount; 
      var updateUsCount = newUsCount - currentUsCount; 

      var updateTotalPerSecond = updateTotalCount/30; 
      var updateDanishPerSecond = updateDanishCount/30; 
      var updateNorwayPerSecond = updateNorwayCount/30; 
      var updateSwedenPerSecond = updateSwedenCount/30; 
      var updateUsPerSecond = updateUsCount/30; 


      getAllSales(); 

      for (var i = 0; i < 30; i++) { 
       window.setTimeout(function() { 
        $("#odoTotal").html(currentTotalCount+updateTotalPerSecond); 

        $("#odoDk").html(currentDanishCount+updateDanishPerSecond); 

        $("#odoNo").html(currentNorwayCount+updateNorwayPerSecond); 

        $("#odoSe").html(currentSwedenCount+updateSwedenPerSecond); 

        $("#odoUs").html(currentUsCount+updateUsPerSecond); 

        currentTotalCount = $("#odoTotal").text().replace(/,/g, "").replace(/(\r\n|\n|\r)/gm, ""); 
        currentDanishCount = $("#odoDk").text().replace(/,/g, "").replace(/(\r\n|\n|\r)/gm, ""); 
        currentNorwayCount = $("#odoNo").text().replace(/,/g, "").replace(/(\r\n|\n|\r)/gm, ""); 
        currentSwedenCount = $("#odoSe").text().replace(/,/g, "").replace(/(\r\n|\n|\r)/gm, ""); 
        currentUsCount = $("#odoUs").text().replace(/,/g, "").replace(/(\r\n|\n|\r)/gm, ""); 


       }, 1000); 

      } 

     } 
    }); 

} 

Answer 1

J'ai obtenu une solution pour que

d'abord créer une variable que vous allez augmenter

var x = 0; 

puis créez un intervalle qui fera ce que vous vouliez après une fois terminé, par exemple 5 (s), Cela incrémenter également votre valeur x chaque fois courir

var interval = setInterval(function() { 
    if (x >= 5) { // just change 5 to 30 
     console.log('Loop timeout ended'); 
     return clearInterval(interval); 
    } 
    // do what ever you want 
    console.log('Current x: '+x); 
    x++; 
}, 5000); 

exemple fonction

function runTimeoutLoop(){ 
    var x = 0; 
    var interval = setInterval(function() { 
     if (x >= 5) { // just change 5 to 30 
      console.log('Loop timeout ended'); 
      return clearInterval(interval); 
     } 
     // do what ever you want 
     console.log('Current x: '+x); 
     x++; 
    }, 5000); 

} 

Demo

Answer 2

Si vous utilisez Firefox 53+ ou babel vous pouvez utiliser ES2017:

async function promiseTimeout(milliseconds) { 
    await new Promise(resolve => setTimeout(()=>resolve(), milliseconds)) 
} 

async function countDown(from) { 
    while (from) { 
     console.log(from--, 'seconds left'); 
     await promiseTimeout(1000); 
    } 
    alert('countdown done'); 
} 

countDown(10); 

Here est babel.