时间戳

首页 > 解决方案 > 有没有办法将任何排序方法实现为生成器函数（JavaScript）？

javascript - 有没有办法将任何排序方法实现为生成器函数（JavaScript）？

问题描述

我现在正在练习反应，做一个排序可视化应用程序。我坚持实现排序功能（想法是在迭代之间添加一些延迟，以便可以实时查看更改）。

在我的代码中有一个类组件，它包含 bubbleSort() 方法（调用 function* bSort）和 render() 方法（当 this.state.array 在每次函数迭代中发生变化时，它们会发生变化）。

它是这样工作的：当我调用 bubbleSort() 数字数组（这会影响渲染）时，只会更改数字。

它看起来像什么

例如：

这是组件类的一部分：

bubbleSorting = () => {
    for (let i = 0; i < this.state.consequence.length ** 2; i++) {
      var arr = bubbleSorting(this.state.consequence).next();
      this.setState({ consequence: arr.value });
    }
};

下面是生成器函数：

export function *bSort (arr: number[]) {
    let len = arr.length;
    for (let i = 0; i < len; i++) {
        for (let j = 0; j < len; j++) {
            if (arr[j] > arr[j + 1]) {
                let tmp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = tmp;
            }
            yield arr;
        }
    }

    return arr;
};

export default bSort;

如何重构这部分代码以使其工作？

标签： javascript

解决方案

好吧，您可以将 async / await 函数与 sleep 函数一起使用

function sleep(ms) {
   return new Promise(res => setTimeout(res, ms)
}

然后你添加 100 毫秒来等待页面更新

bubbleSorting = async () => {
    for (let i = 0; i < this.state.consequence.length ** 2; i++) {
      var arr = bubbleSorting(this.state.consequence).next();
      this.setState({ consequence: arr.value });
      await sleep(100)
    }
};

您可以等待下一个动画帧。但我猜这有点太快了。

function nextFrame() {
  return new Promise(res => requestAnimationFrame(res))
}

bubbleSorting = async () => {
    for (let i = 0; i < this.state.consequence.length ** 2; i++) {
      var arr = bubbleSorting(this.state.consequence).next();
      this.setState({ consequence: arr.value });
      await nextFrame()
    }
};

nextTime每当浏览器即将重绘时都会调用。那是大约16ms

推荐阅读