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

Question

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

通过postMessage触发WebWorker以响应input字段。

当用户在input字段中键入多个字符时，似乎WebWorker正在处理所有先前的过滤器，然后再处理最新的过滤器。

有没有办法告诉WebWorker忘记＆＃34;以前的所有postMessage除了最后一个？

代码：

handleChange = event => {
  this.setState({
    search: event.target.value
  })

  if (event.target.value.length > 2) {
    this.worker.postMessage({search: event.target.value})
    this.worker.onmessage = event => {
      this.setState({data: event.data})
    }
  }
}

更新

我有一个基本的实现工作。每次更新组件时，它都会抛弃活动的WebWorker（通过terminate）。我不确定是否有更好的方法。

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})
    }
  }
}