暂停在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不循环工作

回答

相关问题