Vue使用项目值数组更新状态

Question

大家好

我有一个简单的应用程序，我尝试使用 vue 可视化插入排序算法，我设法编写了一个函数，对项目列表进行排序并返回算法每个步骤的数组，这个数组的最后一个数组是完整的原始数组的排序版本，所以我想要的是更新状态并使用从函数返回的步骤数组的每个值设置原始未排序数组；

这是我的插入排序函数

const insertionSort = (unsortedItems) => {
let sortedList = [...unsortedItems];
let sortingProcess = [];
for (let i = 1; i < sortedList.length; i++) {
   let current = sortedList[i];
   let j = i - 1;
   while (j >= 0 && sortedList[j] > current) {
      sortedList[j + 1] = sortedList[j];
      j--;
      sortingProcess.push(sortedList);
    }
    sortedList[j + 1] = current;
    sortingProcess.push(sortedList);
   }
   return sortingProcess;
 };

 export default insertionSort;

我正在尝试更新我的状态

insertionSort(this.unsortedList).forEach(round =>
    setTimeout(() => (this.unsortedList = round), 600)
  );

我希望上面的代码每 600 毫秒更新一次我的状态，但是当我单击排序按钮时，数组会立即排序，我看不到排序过程的每个步骤。那么我的代码有什么问题？

Answer 1

这不是 Vue 特定的问题。它与最流行的 javascript 面试问题之一有关。 forEach() 正在遍历数组并为每个项目设置超时，因为它没有闭包范围。所有项目将同时执行：从现在起 600 毫秒。可能的解决方案是：

insertionSort(this.unsortedList).forEach((round, i) =>
    setTimeout(() => (this.unsortedList = round), i * 600)
  );

阅读更多here