单击创建进度条，一次只运行一个

Question

我在下面的小提琴中找到了解决方案，但我不确定点击事件中发生了什么。

$(() => {
  const $container = $('#container');
  const $addButton = $('#add');
  const $progress = $('.progress');

  let promise = Promise.resolve();

  $addButton.on('click', () => {
    const $newProgress = $progress.clone();
    $container.append($newProgress);
    promise = promise.then(() => new Promise((resolve) => {
      setTimeout(() => {
      	$newProgress.addClass('active');
        setTimeout(() => {
          resolve();
        }, 2000);
      }, 0);
    }));
  });

});

#add {
  padding: 10px;
  font-size: 18px;
}

#container {
  margin: 20px;
}

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='add'>+ Add</button>
<div id='container'></div>

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

https://jsfiddle.net/hrs9bpsn/

的问题：

1. 为什么我们需要setTimeout？不会过渡css照顾动画进度条吗？
2. 有人可以在这里解释一下承诺逻辑吗？我对承诺不太满意。

非常感谢你的帮助！