Angular:有人知道如何在Angular中延迟for循环吗？

Question

我正在尝试在Angular上创建一个排序可视化工具，于是我决定使用chart.js条形图。我现在正在尝试可视化冒泡排序，我想在内部循环的每次迭代中添加一个延迟。我相信你对冒泡排序的循环结构很熟悉。我想要进行比较，然后调用我创建的绘制函数来绘制更新后的图表，然后在0.5秒的延迟后，进入下一次迭代。

for (let i = 0; i < this.data.length; i++) {

      for (let j = 0; j < this.data.length; j++) {
          //comparison
            this.draw();
          // 0.5 SECOND DELAY
      }

}

Answer 1

我确信有比这更好的方法来管理javascript中的事件循环，但我会让您开始: jsfiddle：https://jsfiddle.net/zdfo5tce/

var data=[1,2,3,4,5]
var counter=0
let draw=(c) => document.body.innerHTML=c;

for (let i = 0; i < this.data.length; i++) {

      for (let j = 0; j < this.data.length; j++) {
          //comparison
            setTimeout(draw.bind(this, counter), ++counter*500);
          // 0.5 SECOND DELAY
      }

}

Answer 2

这将使每次迭代延迟500毫秒

for (let i = 0; i < this.data.length; i++) {
      for (let j = 0; j < this.data.length; j++) {
           setTimeout(function(){
             this.draw();
}, 500 *j);
      }
}