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

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

1 个答案: