JavaScript代码Playground中如何终止动态创建的自定义函数执行？

方案1：Web Worker（首选） #

这是最可靠的解决方式，Web Worker运行在独立的后台线程，和主线程完全隔离，不会阻塞页面，而且能彻底终止线程内的所有代码——包括无限循环、定时器这类异步操作。

实现步骤：

• 把用户输入的代码包装成Worker可执行的脚本内容，用Blob生成临时URL创建Worker
• 每次执行前先终止上一个Worker，避免重复运行
• 需要终止时直接调用worker.terminate()，整个Worker线程会被销毁

代码示例：

let currentWorker = null;

function runCode(code) {
  // 先清理之前的Worker实例
  if (currentWorker) {
    currentWorker.terminate();
  }
  
  // 包装用户代码，处理和主线程的消息交互
  const workerScript = `
    self.onmessage = (e) => {
      try {
        ${code}
        self.postMessage({type: 'done'});
      } catch (err) {
        self.postMessage({type: 'error', msg: err.message});
      }
    };
  `;
  const blob = new Blob([workerScript], {type: 'application/javascript'});
  const blobUrl = URL.createObjectURL(blob);
  
  currentWorker = new Worker(blobUrl);
  
  // 监听Worker的执行结果
  currentWorker.onmessage = (e) => {
    console.log('执行结果:', e.data);
    URL.revokeObjectURL(blobUrl); // 清理临时URL
  };
  
  currentWorker.onerror = (err) => {
    console.error('代码执行出错:', err.message);
    URL.revokeObjectURL(blobUrl);
  };
  
  // 触发代码执行
  currentWorker.postMessage('execute');
}

// 终止当前运行的代码
function terminateCode() {
  if (currentWorker) {
    currentWorker.terminate();
    currentWorker = null;
  }
}

优点：不需要修改用户代码，性能开销小，能彻底终止所有异步/同步代码，不会阻塞主线程。
注意：Worker无法直接操作DOM，需要通过postMessage和主线程通信。

方案2：IFrame沙箱（适合需要DOM操作的场景） #

如果用户代码需要操作DOM，可以用带沙箱属性的iframe来隔离执行环境，终止时直接移除或重置iframe即可清除所有运行中的代码。

实现思路：

• 创建带有sandbox="allow-scripts"的iframe，限制其权限（还可以添加allow-same-origin等属性按需调整）
• 将用户代码注入到iframe的全局环境执行
• 终止时移除iframe，iframe内的所有代码、定时器、DOM操作都会被销毁

代码示例：

let currentIframe = null;

function runCode(code) {
  terminateCode(); // 先清理之前的iframe
  currentIframe = document.createElement('iframe');
  currentIframe.sandbox = 'allow-scripts';
  currentIframe.style.display = 'none';
  document.body.appendChild(currentIframe);
  
  // 注入代码并执行
  currentIframe.contentWindow.eval(code);
}

function terminateCode() {
  if (currentIframe) {
    document.body.removeChild(currentIframe);
    currentIframe = null;
  }
}

优点：支持DOM操作，沙箱可以限制代码权限，防止恶意操作，终止彻底。
缺点：相比Worker，iframe的创建和销毁有一定性能开销，但远优于逐行插入检查标记的方法。

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