暫停在javascript不循環工作

這是睡眠功能：暫停在javascript不循環工作

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

這是具體化的textarea的內容的功能：

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

當我想要做一個循環，我只能看到最後一個值。這是代碼：

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

在textarea的，我只能看到「7」，最後的數字。這是不正確的實現。爲什麼會發生？（睡眠正常）

來源

2015-06-20 Alvaro Martin Garcia

試試'setTimeout（）' – Arvind

爲了提高效率，Javascript是單線程的，用戶代理在函數終止之前不更新顯示。在一個函數中進行所有你想要的改變，你只會看到成品。 – RobG

爲什麼會發生？

因爲你永遠不會讓瀏覽器有機會展示你正在做的更新，因爲你正在讓UI線程無意義地循環。

對於基本上任何情況來說，忙碌的待遇本質上都不是正確的答案。

在這種情況下，你要找的是什麼了一系列setTimeout S的任一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沒有承諾的標準形式，但（他們在未來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">

來源

2015-06-20 09:43:39

暫停在javascript不循環工作

回答

相關問題