如何使用setTimeout逐行浏览for循环？

Question

我正在尝试可视化冒泡排序算法，我试图找出一种方法，使我的for循环每1000ms进行一次迭代，因此它逐步执行，并且能够绘制每次迭代的结果。

我尝试使用setTimeout，但是for循环继续执行，而setTimeout异步执行。还有另一种方法可以仅“逐步”通过for循环吗？

// bubble sort
function bubbleSort(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length; j++) {
      if (arr[j] > arr[j + 1]) {
        let temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
        delay();
      }
    }
  }
  return arr;
}
function delay() {
  setTimeout(() => {
    console.log('hello');
  }, 1000);
}

Answer 1

您可以将函数转换为generator function，并在每次排序后产生数组的状态。

如果尝试调用.next().value，则在外循环完成时，将引发异常。在这里可以捕获它并取消间隔。

console.log('START');

let arr = [ 5, 3, 4, 2, 1 ],
    gen = bubbleSort(arr),
    wait = 1000,
    counter = 0;

const intervalId = setInterval(() => {
  try {
    const value = gen.next().value.join(',');
    console.log(`Step ${++counter}: ${value}`);
  } catch (e) {
    clearInterval(intervalId);
    console.log('STOP');
  }
}, wait);

function* bubbleSort(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length; j++) {
      if (arr[j] > arr[j + 1]) {
        let temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
        yield arr;
      }
    }
  }
}

.as-console-wrapper { top: 0; max-height: 100% !important; }