Как приостановить выполнение Javascript

Question

У меня есть массив элементов, которые я хочу перебрать, добавьте addClass к каждому рассматриваемому элементу DOM, уберите его с помощью removeClass через 1 секунду, затем перейдите к следующему элементу в массиве и сделайте то же самое.

Вместо этого происходит то, что все элементы в массиве применяют addClass одновременно, затем каждый из них удаляется по порядку, с интервалом в 1 секунду. Таким образом, строка removeClass работает, но я не могу понять, почему addClass не работает. Я могу вручную ввести номер MS для addClass, и он будет работать как положено.

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

Подождите, вы используете jQuery ... он найдет все и добавит класс ко всем.

Вам нужно l oop просмотреть каждый элемент один за другим.

Кстати, как указал @ggorlen, вам нужно ++timer, иначе removeClass происходит в том же цикле событий, что и addClass.

(но вы имеете в виду, что весь addClass был сделан для sequence[0], sequence[1], ...?)

Answer 2

Может быть проще await Обещание каждый раз, когда вы хотите отложить вместо этого:

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>