如何暂停 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...它会查找所有内容并将该类添加到所有内容。

您需要一项一项地遍历每一项。

顺便说作为@ggorlen指出的那样，你需要++timer否则removeClass发生相同的事件周期为addClass 。

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