Vue使用项目值数组更新state

Question

大家好

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

这是我的插入排序 function

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;

在这里我正在尝试更新我的 state

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

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

Answer 1

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

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

在这里阅读更多