Vanilla JS хочет сделать новую индикатор на каждом клике?

Question

У меня есть индикатор выполнения, который создается за 2 секунды при клике.Теперь я хочу создать и добавить в DOM новый индикатор на каждом клике.Как я могу это сделать?Я попытался использовать обещание, но оно было решено только после setTimeout - не уверен, что он вообще что-то делает.Могу ли я использовать кадр анимации запроса здесь?

(function() {
  const container = document.getElementById('container');

  const addBtn = document.getElementById('add');

  const progress = document.getElementsByClassName('progress');

  let promise = Promise.resolve();


  document.addEventListener('click', function(e) {
    // clone the progress made so far
    const newProgress = Object.assign({}, progress);

    // now add the new progress into container element, so its visible
    container.appendChild(newProgress[0]);

    promise = promise.then(() => new Promise((resolve) => {
      setTimeout(() => {
        newProgress[0].classList.add('active');
        console.log(newProgress[0].classList)
        setTimeout(() => {
          resolve();
        }, 2000);
      }, 0);
    }));
  });

})();

#container {
  margin: 20px;
}

.progress {
  margin: 0 0 10px;
  width: 500px;
  height: 20px;
  background-color: #e0e0e0;
}

.progress .bar {
  width: 0;
  height: 100%;
  background-color: lightgreen;
  transition: width 2s ease;
}

.progress.active .bar {
  width: 100%;
}

<button id="add">Add</button>

<div id="container"></div>

<div style="display: none">
  <div class="progress">
    <div class="bar"></div>
  </div>
</div>

Answer 1

Рекомендуемый метод для дублирования узлов DOM (т. Е. Соответствия узлов .progress) заключается в использовании метода .cloneNode().В случае вашего кода вы также хотели бы передать true на .cloneNode(), чтобы гарантировать, что дочерние элементы узла прогресса также будут клонированы.

Итак, если я правильно понимаю ваш вопрос, то выхотите клонировать узел прогресса, а затем отложить присвоение класса .active клону.Это может быть достигнуто путем внесения следующих изменений в ваш код:

(function(){
  const container = document.getElementById('container');

  const addBtn = document.getElementById('add');

  // use querySelector to aquire progress node for subsequent cloning
  const progress = document.querySelector('.progress');

  addBtn.addEventListener('click', function(e) {

    // use cloneNode to duplicate existing node on DOM rather than 
    // Object.assign as you currently are
    const newProgress =  progress.cloneNode(true);
    
    container.appendChild(newProgress);
      
    // delay assignment of '.active' class to clone
    setTimeout(() => {    
      newProgress.classList.add('active');
    }, 50); 
  });
})();

#container {
  margin: 20px;
}

.progress {
  margin: 0 0 10px;
  width: 500px;
  height: 20px;
  background-color: #e0e0e0;
}

.progress .bar {
  width: 0%;
  height: 100%;
  background-color: lightgreen;
  transition: width 2s ease;
}

.progress.active .bar {
  width: 100%;
}

<button id="add">Add</button>

<div id="container"></div>

<div style="display: none">
  <div class="progress">
    <div class="bar"></div>
  </div>
</div>