AJAX替换DOM后如何终止原<script>中的运行脚本？

核心思路是给每个加载的脚本实例绑定专属的"清理上下文"，记录它创建的所有可终止任务（定时器、动画帧、事件监听等），在DOM替换时统一清理这些资源。

具体实现方案 #

1. 封装带追踪功能的脚本执行器 #

把原生eval替换为自定义函数，临时重写全局的定时器/动画帧方法，自动记录脚本创建的任务ID：

// 执行脚本并返回对应的清理函数
function executeScriptWithCleanup(scriptContent) {
  const cleanupTasks = new Set();
  
  // 保存原生方法引用
  const originalSetInterval = window.setInterval;
  const originalSetTimeout = window.setTimeout;
  const originalRAF = window.requestAnimationFrame;
  const originalAddListener = EventTarget.prototype.addEventListener;

  // 重写全局方法，追踪任务
  window.setInterval = (...args) => {
    const id = originalSetInterval(...args);
    cleanupTasks.add({ type: 'interval', id });
    return id;
  };

  window.setTimeout = (...args) => {
    const id = originalSetTimeout(...args);
    cleanupTasks.add({ type: 'timeout', id });
    return id;
  };

  window.requestAnimationFrame = (...args) => {
    const id = originalRAF(...args);
    cleanupTasks.add({ type: 'raf', id });
    return id;
  };

  // 拓展：追踪事件监听
  EventTarget.prototype.addEventListener = function(type, listener, options) {
    originalAddListener.call(this, type, listener, options);
    cleanupTasks.add({ type: 'event', target: this, type, listener });
  };

  try {
    // 执行目标脚本
    eval(scriptContent);
  } finally {
    // 恢复原生方法，避免污染全局
    window.setInterval = originalSetInterval;
    window.setTimeout = originalSetTimeout;
    window.requestAnimationFrame = originalRAF;
    EventTarget.prototype.addEventListener = originalAddListener;
  }

  // 返回清理函数，用于后续终止所有任务
  return () => {
    cleanupTasks.forEach(task => {
      switch(task.type) {
        case 'interval': clearInterval(task.id); break;
        case 'timeout': clearTimeout(task.id); break;
        case 'raf': cancelAnimationFrame(task.id); break;
        case 'event': task.target.removeEventListener(task.type, task.listener); break;
      }
    });
    cleanupTasks.clear();
  };
}

2. 绑定清理逻辑到DOM替换流程 #

在每次发起AJAX请求前，先清理旧脚本的所有任务，再加载新内容并记录新脚本的清理函数：

// 全局保存当前容器对应的所有清理函数
let currentCleanupFns = [];

function loadNewContainerContent() {
  // 第一步：清理旧脚本的所有任务
  currentCleanupFns.forEach(cleanup => cleanup());
  currentCleanupFns = [];

  // 第二步：加载新内容并替换DOM
  fetch("/newpage").then(r => r.text()).then(html => {
    const tmp = document.createElement('html');
    tmp.innerHTML = html;
    const newContainer = tmp.querySelector("#container");
    document.querySelector("#container").outerHTML = newContainer.outerHTML;

    // 第三步：执行新脚本并记录清理函数
    const newScripts = document.querySelectorAll("#container script");
    newScripts.forEach(scr => {
      const cleanupFn = executeScriptWithCleanup(scr.innerHTML);
      currentCleanupFns.push(cleanupFn);
    });
  });
}

方案优势 #

• 每个脚本的任务都被独立追踪，不会和其他脚本的资源混淆
• 替换DOM前自动批量清理所有旧资源，无需手动逐个终止
• 执行完脚本后立即恢复原生方法，不会对全局环境造成持久影响
• 可灵活拓展，支持清理WebSocket连接、自定义定时器等其他资源

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