javascript - 如何暂停 Javascript 执行

Question

我有一个想要迭代的元素数组，为每个有问题的 DOM 元素添加 Class，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

每次您想延迟时，等待 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>