React.js冒泡排序问题

问题描述

我正在创建一个排序算法可视化工具。当我单击“生成”时，将创建一个未排序的整数数组并将其呈现到屏幕上。当我单击“气泡排序”按钮时，我希望一次性对整个数组进行排序，但是实际上发生的是每次通过后气泡排序都会停止，因此我必须多次单击“气泡排序”才能对数组进行排序（请参见我的图片链接以供参考）。我还实现了选择排序算法，但遇到了同样的问题。我怎样才能解决这个问题？任何想法将不胜感激。

generates an array after bubble sort is clicked once

这种继续模式直到对数组排序为止。我必须连续单击“气泡排序”按钮来对数组进行排序。 这是我的气泡排序算法代码。

//============ bubble sorts array when button is clicked
  bubbleSort() {
    const arr = this.state.array;
    const n = arr.length;
    
    for(let i=n-1; i>0; i--) {
      for(let j=0; j<i; j++) {
        setTimeout(() => { // setTimeout for each swap so we can see the swap happening
          if(arr[j] > arr[j+1]) {
              let temp = arr[j];
              arr[j] = arr[j+1];
              arr[j+1] = temp;
              this.setState({ swaps: this.state.swaps + 1 }); // each swap increment swaps state by 1
          }
          this.setState({ comparisons: this.state.comparisons + 1 }) // each comparison increment comparisons state by 1
        },i * 10); // timeout is i * 10 millisecconds 
      }
    }
    this.setState({ array: arr });
  }

这是我返回JSX的渲染函数。 render function

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）