如何在addEventListener中终止Web Worker？自动补全场景求助

问题说明 #

我编写了以下Web Worker相关代码，但遇到了Worker无法终止的问题：

Worker 文件（worker.js） #

//worker.js
self.addEventListener("message", function(event) {
     self.postMessage(event.data);
     self.close();
  });

主文件（main.js） #

//main.js
var webworker = new Worker("worker.js");
webworker.postMessage('Send something.');
webworker.addEventListener("message", function(event) {
   webworker.terminate();
});

调用webworker.terminate()后无报错，但Worker并未被终止。

当前我在开发自动补全输入框，每次输入时会创建8个Worker处理大数据搜索，但旧Worker始终处于活跃状态（CPU占用可验证），即使调用终止方法也无法停止其运行。简化后的输入事件代码如下：

inp.addEventListener("input", function(e) {     
        for (let i = 0; i < 8; i++) {
        var webworker = new Worker("autocomplete/worker.js");
        webworker.postMessage(inp.value);
        webworker.addEventListener("message", function(event) {
        //处理搜索结果
   })
 }
}

需求：Worker返回结果后立即终止，且输入新内容时终止所有旧Worker。

解决方案 #

1. 全局存储Worker实例引用 #

创建全局数组保存所有活跃的Worker，输入新内容时先终止旧Worker，再创建新实例：

// 全局变量存储当前活跃的Worker
let activeWorkers = [];

inp.addEventListener("input", function(e) {     
        // 终止所有旧Worker
        activeWorkers.forEach(worker => worker.terminate());
        activeWorkers = [];

        for (let i = 0; i < 8; i++) {
        const webworker = new Worker("autocomplete/worker.js");
        activeWorkers.push(webworker);
        
        webworker.postMessage(inp.value);
        
        webworker.addEventListener("message", function(event) {
            // 处理搜索结果
            // 终止当前Worker并从数组移除
            webworker.terminate();
            activeWorkers = activeWorkers.filter(w => w !== webworker);
        });

        // 监听Worker错误，避免异常导致实例残留
        webworker.addEventListener("error", function() {
            webworker.terminate();
            activeWorkers = activeWorkers.filter(w => w !== webworker);
        });
     }
});

2. Worker内部主动关闭 #

在Worker完成任务后主动调用self.close()，配合主线程的terminate()形成双重保障：

// worker.js 优化版
self.addEventListener("message", function(event) {
    // 执行大数据搜索逻辑
    const searchResult = /* 你的搜索处理代码 */;
    // 返回结果给主线程
    self.postMessage(searchResult);
    // Worker主动关闭自身
    self.close();
});

3. 修正变量作用域问题 #

原代码中循环内用var声明webworker会导致作用域提升，可能让terminate()指向错误实例，改用const或let避免该问题（上述解决方案已使用const）。

4. 防抖优化（可选） #

针对高频输入场景，添加防抖逻辑减少Worker创建频率：

let debounceTimer;
inp.addEventListener("input", function(e) {     
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        // 终止旧Worker
        activeWorkers.forEach(worker => worker.terminate());
        activeWorkers = [];

        // 创建新Worker的逻辑
        for (let i = 0; i < 8; i++) {
            const webworker = new Worker("autocomplete/worker.js");
            activeWorkers.push(webworker);
            
            webworker.postMessage(inp.value);
            
            webworker.addEventListener("message", function(event) {
                // 处理结果
                webworker.terminate();
                activeWorkers = activeWorkers.filter(w => w !== webworker);
            });

            webworker.addEventListener("error", function() {
                webworker.terminate();
                activeWorkers = activeWorkers.filter(w => w !== webworker);
            });
        }
    }, 300); // 300ms防抖间隔，可根据需求调整
});

内容的提问来源于stack exchange，提问作者Đoàn Lê Bảo Long