我有一个函数foo，我想添加一个sleep / wait函数来制作一种DOM元素动画。我已经做过一些研究，并且知道暂停javascript函数是不可能的，因为它会冻结浏览器-如果我输入错了，请纠正我。我该如何克服？
function foo() {
while (someCondition) {
var $someDiv = $('.someDiv:nth-child(' + guess + ')');
$someDiv.css({'background-color': 'red'});
wait 1000ms
$someDiv.css({'background-color': 'blue'});
wait 1000ms
if (someCondition2) {
doSomething; }
else {
for loop }
}
}
$someDiv每次while循环迭代都引用不同的DOM元素，因为变量会guess发生变化
我尝试过的
我使用了下面的函数，它起作用了，但问题是我无法for在异步函数foo中使用循环
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
我尝试过，setTimeout但无法获得任何有效的结果。
如果我包装setTimeout这段代码：('$someDiv').css({'background-color': 'red'});那么在指定的时间量之后，所有的$someDiv'sCSS样式都会一起更改（请记住，$someDiv每次while循环迭代都指向不同的DOM元素）。
如果我setTimeout使用语句包装一段代码if，else那么我会出错-无限循环
题
仅出于可视化问题的目的简化了foo函数。我正在使用的原始功能可以在Codepen上找到（findNumber功能）
我想制作一个二进制搜索算法动画。与此类似
如何获得理想的结果？
通常：如何在每次迭代之间具有间隔的循环中对DOM元素进行动画处理？
解决此问题最好，最简洁的方法是使用Java功能的将来版本（ES2017）中的async/await功能。这使您摆脱回调地狱。您可以创建一个简单的sleep函数，如下所示：
function sleep(time) {
return new Promise(resolve => setTimeout(()=>resolve(), time));
}
您可以将其用于常规Promise处理：
sleep(1000).then(()=>console.log('A second later'));
但是，使用该async功能，您可以使用await关键字使代码在继续执行之前等待承诺被解决。
async function doSomething() {
await sleep(1000);
console.log('A second later');
}
这意味着您也可以使用普通循环，包括breakandcontinue语句：
async function doSomething() {
let i = 0;
while (true) {
await sleep(1000);
console.log(i);
if (++i === 5) break;
}
}
这意味着您的代码可以大大简化：
async function foo() {
var n = 5;
while (n > 0) {
n--;
var wait = 0;
//$('#someDiv').css({'background-color': 'red'});
console.log('doSomething-1');
//wait 1000ms
await sleep(1000);
//$('#someDiv').css({'background-color': 'blue'});
console.log('doSomething-2');
//wait 1000ms
await sleep(1000);
if (true) {
console.log('doSomething-3');
break;
} else {
console.log('loop')
}
}
}
（jsFiddle）
唯一的问题是，此功能远未获得普遍支持。因此，您需要使用Babel这样的软件来进行翻译。
还要注意，在后台，您的foo函数现在立即返回并给出一个Promise。这Promise可以通过函数的返回值来解决。因此，如果您想在完成时执行更多代码，foo则必须这样做foo().then(/*callback*/)。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句