如何为eval执行的JS代码设置时间限制以防止无限循环？

嘿，这个问题其实挺常见的——直接在主线程里用eval跑用户代码，万一碰到无限循环整个页面就卡死了对吧？别担心，咱们用Web Worker就能完美解决，因为它能把代码放到独立线程里执行，主线程还能监控超时时间，直接上方案：

核心思路：用Web Worker隔离执行环境 #

JavaScript主线程是单线程的，如果eval的代码陷入无限循环，会直接阻塞整个事件循环，连定时器都没法触发，根本没法中断它。而Web Worker是独立的后台线程，和主线程互不干扰，咱们可以把要执行的代码丢到Worker里，主线程设置定时器，超时就直接终止Worker，完美解决无限循环的问题。

1. 封装一个带超时的执行函数 #

咱们可以写一个通用函数，接收要执行的代码和超时时间，返回Promise来处理结果：

function runWithTimeout(code, timeoutMs) {
  return new Promise((resolve, reject) => {
    // 编写Worker的执行逻辑
    const workerCode = `
      self.onmessage = (e) => {
        try {
          // 执行传入的代码
          const result = eval(e.data);
          // 把执行结果发回主线程
          self.postMessage({ type: 'success', result });
        } catch (err) {
          // 捕获执行错误并发送
          self.postMessage({ type: 'error', error: err.message });
        }
        // 执行完成后关闭Worker
        self.close();
      };
    `;

    // 用Blob创建内联Worker的URL（不用单独写Worker文件）
    const blob = new Blob([workerCode], { type: 'application/javascript' });
    const worker = new Worker(URL.createObjectURL(blob));

    // 设置超时定时器：到点就终止Worker
    const timeoutId = setTimeout(() => {
      worker.terminate();
      reject(new Error(`代码执行超时，已超过${timeoutMs}毫秒`));
    }, timeoutMs);

    // 监听Worker返回的消息
    worker.onmessage = (e) => {
      clearTimeout(timeoutId); // 清除超时定时器
      worker.terminate(); // 关闭Worker
      if (e.data.type === 'success') {
        resolve(e.data.result);
      } else {
        reject(new Error(e.data.error));
      }
    };

    // 监听Worker的错误事件
    worker.onerror = (err) => {
      clearTimeout(timeoutId);
      worker.terminate();
      reject(new Error(`Worker执行出错：${err.message}`));
    };

    // 把要执行的代码发送给Worker
    worker.postMessage(code);
  });
}

2. 替换原来的eval调用 #

原来的代码是直接在主线程用eval，现在改成用咱们封装的函数：

// 获取用户输入的代码
const programCode = document.getElementById("program").value;
// 设置最长执行时间，比如5秒（5000毫秒）
const maxExecutionTime = 5000;

runWithTimeout(programCode, maxExecutionTime)
  .then((result) => {
    console.log('代码执行成功，结果：', result);
    // 这里处理成功逻辑，比如把结果赋值给变量x
    var x = result;
  })
  .catch((error) => {
    console.error('代码执行失败：', error.message);
    // 这里处理错误或超时的情况，和原来的catch逻辑对应
  });

几个要注意的点 #

• Worker的环境限制：Worker里没有DOM对象，所以如果用户输入的代码里有document、window这类DOM操作，会直接报错，得提前告知用户或者做过滤。
• 安全风险：eval本身就有安全隐患，如果是执行用户输入的代码，一定要注意防范XSS和恶意代码，这个方案只是解决超时问题，安全问题得额外处理。
• 强制终止：worker.terminate()是直接强制终止Worker的，不会给代码清理资源的机会，所以如果代码里有占用资源的操作，会被直接切断，这点要心里有数。

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