javascript - Vanilla JS 想要在每次点击时创建一个新的进度条？

Question

我有这个进度条，点击时会在 2 秒的 setTimeout 内创建。现在我想在每次点击时创建并附加到 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>

标签： javascriptdom

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>