Javascript 如何告诉WebWorker放弃除最新的postMessage数据之外的所有数据？

我在React组件中使用一个WebWorker来过滤一个大数组，而不阻塞主UI线程

WebWorker通过

postMessage

触发，以响应

输入

字段

当用户在

输入

字段中键入多个字符时，WebWorker似乎在处理最新的过滤器之前处理所有以前的过滤器

有没有办法告诉网络工作者“忘记”除最后一条以外的所有以前的

postMessage

s

代码：

更新：

我有一个基本的实现工作。每次更新组件时，它都会丢弃活动的WebWorker（通过

终止

）。我不确定是否有更好的办法

constructor () {
  this.SearchWorker = require('worker-loader!../workers/search.js') // using worker-loader & webpack
  this.worker = new this.SearchWorker()
}

...

componentDidUpdate = (props, state) => {
  this.worker.terminate()
  this.worker = new this.SearchWorker()
  if (state.search !== this.state.search && this.state.search.length > 2) {
    this.worker.postMessage({search: this.state.search})
    this.worker.onmessage = event => {
      this.setState({data: event.data})
    }
  }
}

---

为什么不将一个值与最后一个输入进行比较，看看最近的输入是否与存储的输入不相等。然后，在你可以放心地说这是最新的。@Caspain，我需要有一些方法告诉网络工作者停止做任何处理。我不确定这方面是否有最佳实践。到目前为止，我所看到的是

terminate

方法，它要求一个全新的WebWorker在注册之后进行注册。我使用自定义事件来激发、过滤旧事件。每当触发此事件时，只有webWorker才能启动。在我的情况下，它应该已经启动了。例如，我可以对输入进行去抖动，但这并不能完全解决问题，因为在某些情况下，WebWorker的运行时间可能会超过正常的去抖动周期，应该停止。我想加入直接去抖动的延迟会怎么样。

constructor () {
  this.SearchWorker = require('worker-loader!../workers/search.js') // using worker-loader & webpack
  this.worker = new this.SearchWorker()
}

...

componentDidUpdate = (props, state) => {
  this.worker.terminate()
  this.worker = new this.SearchWorker()
  if (state.search !== this.state.search && this.state.search.length > 2) {
    this.worker.postMessage({search: this.state.search})
    this.worker.onmessage = event => {
      this.setState({data: event.data})
    }
  }
}