在javascript中暫停無法循環播放

Question

這是睡眠功能：

    function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

這是用於實現文本區域內容的功能：

    Luminosidad.prototype.prueba = function(num)
{
    document.getElementById("pruebas").value = num; 
}

當我想循環執行時，只能看到最后一個值。 這是代碼：

for (var i = 1; i < 8; i++)
    {
        sleep(this.opcion.velocidad);
        this.prueba(i);
    }

在文本區域上，我只能看到“ 7”，即最后一個數字。 就像沒有正確實現。 為什么會發生？ （睡眠正常）

Answer 1

為什么會發生？

因為您從未讓瀏覽器有機會顯示您正在進行的更新，因為您使UI線程忙於無意義地循環。

從根本上說，忙碌等待永遠不是對任何情況的正確答案。

在這種情況下，您要查找的是一系列setTimeout的setInterval ：

 function Luminosidad() {} Luminosidad.prototype.prueba = function(num) { document.getElementById("pruebas").value = num; }; Luminosidad.prototype.loop = function(milliseconds) { var i = 1; var obj = this; setTimeout(next, milliseconds); function next() { obj.prueba(i++); if (i < 8) { setTimeout(next, milliseconds); } } }; var l = new Luminosidad(); l.loop(500); 

 <input type="text" id="pruebas"> 

注意： loop功能會在對pruebas元素進行任何更新之前返回。 如果您有需要在所有更新完成后運行的邏輯，則需要讓loop接受回調或返回承諾。

由於JavaScript尚沒有標准的Promise形式（它們已經在ES6中推出了，所以根本就不遠了），這里有一個回調的示例：

 // Requires that your browser support ES6 promises! function Luminosidad() {} Luminosidad.prototype.prueba = function(num) { document.getElementById("pruebas").value = num; }; Luminosidad.prototype.loop = function(milliseconds, callback) { var i = 1; var obj = this; setTimeout(next, milliseconds); function next() { obj.prueba(i++); if (i < 8) { setTimeout(next, milliseconds); } else { callback(); } } }; var l = new Luminosidad(); l.loop(500, function() { // This runs when everything is done document.body.insertAdjacentHTML( "beforeend", "All done" ); }); 

 <input type="text" id="pruebas"> 

在ES6中，您可以改用諾言：

 // Requires that your browser support ES6 promises! function Luminosidad() {} Luminosidad.prototype.prueba = function(num) { document.getElementById("pruebas").value = num; }; Luminosidad.prototype.loop = function(milliseconds) { var obj = this; return new Promise(function(resolve) { var i = 1; setTimeout(next, milliseconds); function next() { obj.prueba(i++); if (i < 8) { setTimeout(next, milliseconds); } else { resolve(); } } }); }; var l = new Luminosidad(); l.loop(500).then(function() { // This runs when everything is done document.body.insertAdjacentHTML( "beforeend", "All done" ); }); 

 <input type="text" id="pruebas">