Question

简介

我正在构建用于研究目的的排序算法可视化程序，并且我有一个sortArray()函数，用于对要排序的数组设置动画。如您在代码中所见。

它可以正常工作，但是问题是我想给数组花费一些时间来进行排序，并且我想要一种在运行时停止此功能的方法。

到目前为止我尝试过的事情

当我意识到自己遇到了这个问题之后，我以为“停止”按钮将是解决我的问题的好方法，我添加了一个新状态“ Abort”，最初的想法是，{{1 }}函数正在运行，该函数将每次检查中止状态是否设置为true，如果是，则该函数将停止。当然，它没有用。

在我之前的尝试失败之后，我从代码中删除了“ abort”状态并将其转换为普通变量，以为问题可能与sortArray()函数异步有关，但并没有也不行。

此后，我做了一些研究，但没有发现任何有用的东西。

代码：

setState

Answer 1

您能做一些涉及网络工作者的事情吗？

构造这样的类

class LongOperation extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      running: false,
      results: null,
      worker: null,
    }
  }

  startLongOp(){
     const worker = new Worker('yourIsolatedOp.js')
     //...setup
     this.setState({
       running: true,
       worker: worker,
     })
  }

  cancel() {
    if(running) { 
      this.state.worker.terminate() 
    }
    this.setState({
      running: false, 
      worker: null,
    })
  }

  render() {
   //Do your rendering
   <button onClick={e => this.startLongOp()}>Start</button>
   <button onClick={e => this.cancel()}>Cancel</button>
  }
}

//while loop:
while(this.state.running) {
  //do stuff
}

您也可以使用while循环来执行此操作，但是它将在UI线程上。我没有尝试过，这只是我脑海中的草图。现在，设计并发排序将是一个更大的挑战……如果您可以将其隔离，则工作人员将是最简单的。

*注意：我没有详细介绍如何处理网络工作者传递的数据等。但是您可以轻松找到它。我认为没有理由不能从这些消息中更新状态。

在React中运行时停止功能

简介

到目前为止我尝试过的事情

代码：

1 个答案: