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

大家好

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

我有一个简单的应用程序，我尝试使用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;

---

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

这不是Vue特有的问题。这与一个最流行的javascript面试问题有关

forEach（

）在数组上循环并在每个项上设置超时，因为它没有闭包范围。所有项目将同时执行：600毫秒后。可能的解决办法是：

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

---

阅读更多内容

这不是Vue特定的问题。这与一个最流行的javascript面试问题有关

forEach（

）在数组上循环并在每个项上设置超时，因为它没有闭包范围。所有项目将同时执行：600毫秒后。可能的解决办法是：

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

---

阅读更多内容

仍然得到相同的结果只要我单击“排序”，数组就会被排序，所以您希望它递归更新，对吗？您可以尝试将此逻辑放入watcher并收听unsortedList。很抱歉，您的解决方案有效，我的算法功能中有一个错误仍然得到相同的结果数组在我单击Sorts后立即排序您希望它递归更新，对吗？您可以尝试将此逻辑提交给watcher，并收听unsortedList。很抱歉，您的解决方案有效，我只是在我的算法函数中有一个bug