如何暂停 Javascript 执行

Question

我有一个要遍历的元素数组，向每个有问题的 DOM 元素添加类，1 秒后用 removeClass 将其移除，然后移动到数组中的下一个元素并执行一样。

相反，数组中的所有元素都同时应用了 addClass，然后按顺序删除每个元素，相隔 1 秒。所以 removeClass 行有效，但我不明白为什么 addClass 无效。我可以手动输入 addClass 的 MS 数量，这将按预期工作。

function runSequence () {    
  randomSequence();    
  for (let i = 0, timer=0; i < sequence.length; i++) {    
    setTimeout(function () { $('.' + sequence[i]).addClass('button-press'); }, (timer * 1000));
    setTimeout(function() { $('.' + sequence[i]).removeClass('button-press'); }, ((timer++) * 1000));
  }
}

Answer 1

每次您想延迟时 await Promise 可能更容易：

const sequence = ['foo', 'bar', 'baz', 'buzz'];
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

async function runSequence() {
  for (let i = 0; i < sequence.length; i++) {
    const $elm = $('.' + sequence[i]);
    $elm.addClass('button-press');
    await delay(1000);
    $elm.removeClass('button-press');
  }
}

runSequence();

.button-press {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foo">div</div>
<div class="bar">div</div>
<div class="baz">div</div>
<div class="buzz">div</div>

Answer 2

等等，您正在使用 jQuery...它会找到所有内容并将 class 添加到所有内容中。

您需要逐项循环遍历每一项。

顺便说一句，正如@ggorlen 指出的那样，您需要 ++timer 否则 removeClass 会发生与 addClass.

相同的事件周期

（但是你的意思是所有的 addClass 都为 sequence[0], sequence[1], ... 完成了吗？）

如何暂停 Javascript 执行

How to Pause Javascript Execution

javascript

dom

settimeout

pause