JS中如何点击按钮终止正在运行的函数？（Electron场景）

实现思路 #

Electron主进程是单线程执行的，无法直接强制终止一个正在运行的函数，我们可以通过终止标志位判断的方式实现需求，这里推荐用规范的AbortController统一管理终止信号，在runme的执行逻辑中插入终止判断即可。

各文件修改代码 #

1. 渲染进程（homepage.js/你标注的main.js） #

新增停止按钮的点击监听，向主进程发送终止信号：

// 原有启动按钮逻辑保留
// document.getElementById('startBtn').addEventListener('click', () => {
//   ipcRenderer.send('startIt');
// })

// 新增停止按钮逻辑
document.getElementById('stopBtn').addEventListener('click', () => {
  ipcRenderer.send('stopIt');
});

2. 主进程（electron.js） #

新增终止控制器变量，监听终止事件并触发信号：

// 顶部声明全局终止控制器
let runAbortController = null;

ipcMain.on('startIt', () => {
  // 启动前先终止上一次未完成的任务，避免重复执行
  if (runAbortController) runAbortController.abort();

  runAbortController = new AbortController();
  const { runme } = require('./runme.js');
  // 将终止信号传入runme方法
  runme(runAbortController.signal);
});

ipcMain.on('stopIt', () => {
  if (runAbortController) {
    runAbortController.abort();
    runAbortController = null;
  }
});

如果你的Node版本低于15.0.0不支持AbortController，可以用自定义布尔变量代替：主进程定义let stopFlag = false，收到startIt事件时把stopFlag设为false，收到stopIt事件时设为true，把stopFlag传入runme做判断即可。

3. runme.js #

修改runme方法接收终止信号，在执行逻辑中插入终止判断：

function runme(signal) {
  // 示例：循环类同步任务，每次循环判断是否终止
  for (let i = 0; i < 100000; i++) {
    // 收到终止信号直接退出函数
    if (signal.aborted) {
      console.log('任务已终止');
      return;
    }
    // 你的原有业务逻辑
    console.log(`执行第${i}步`);
  }

  // 如果你是异步请求类任务，直接把signal传入配置即可
  // fetch('/long-time-request', { signal })
  //   .then(res => res.json())
  //   .catch(err => {
  //     if (err.name === 'AbortError') console.log('请求已终止');
  //   })

  // 如果你是调用了子进程，监听abort事件销毁子进程即可
  // const child = require('child_process').exec('xxx命令')
  // signal.addEventListener('abort', () => child.kill())
}

module.exports = { runme };

注意事项 #

• 如果你的runme是完全阻塞主线程的同步长任务，无法插入终止判断，建议将逻辑移到Worker线程中执行，终止时直接销毁Worker即可，避免主进程卡顿导致应用无响应。
• 多次点击启动按钮时会自动终止上一次任务，避免多任务并行冲突。

内容的提问来源于stack exchange，提问作者noobcode0000