Javascript 生成器没有产生新的结果

Javascript generator doesn't yield new results

我正在 React 中创建一个生成器函数,以生成一个 insertionSort 动画,一步一步:

function* insertionSort(data) { // yield state of array at each step of sorting
  const inputArr = [...data]
  let n = inputArr.length
  for (let i = 1; i < n; i++) {
    // Choosing the first element in our unsorted subarray
    let current = inputArr[i]
    // The last element of our sorted subarray
    let j = i - 1
    while (j > -1 && current < inputArr[j]) {
      inputArr[j + 1] = inputArr[j]
      j--
    }
    inputArr[j + 1] = current
    yield inputArr
  }
  yield inputArr
}

export default insertionSort

并在每次按下按钮时调用 next() 函数:

      <button
        onClick={() => {
          console.log(insertionSort(data).next().value)
        }}>
        Insertion Sort
      </button>

但是,只有第一次按下按钮会产生预期的结果。随后的每一次印刷都只是复制同样的东西。

我相信函数逻辑是正确的,因为删除生成器语法并将其用作普通循环会产生正确的结果。

我是否遗漏了 yield 的工作原理?

每次调用 insertionSort(data) 都会创建一个从头开始的新生成器。您在新实例上重复执行第一步。你会想要使用

const sorter = useRef();

<button onClick={() => {
  console.log(data);
  sorter.current = insertSort(data);
}}>
  Start Insertion Sort
</button>
<button onClick={() => {
  console.log(sorter.current.next().value);
}}>
  Step
</button>