JavaScript作用域问题：如何不使用全局变量跨函数清除setInterval

核心思路是把定时器ID限定在局部作用域/专用存储位置，完全避免全局变量污染，以下是几种常见的可落地实现方案：

方案1：闭包封装（最通用） #

把两个方法封装在同一个立即执行函数（IIFE）的作用域内，定时器ID仅在该闭包内可访问，外部完全不可见，不会造成全局污染。

const slideshowController = (function() {
  // 仅闭包内可访问的定时器ID，不会泄露到全局作用域
  let intervalId = null;
  return {
    beginSlideshow() {
      // 先清除已存在的定时器，避免重复创建导致逻辑异常
      if (intervalId) clearInterval(intervalId);
      intervalId = setInterval(function () {
        // 幻灯片轮播业务逻辑
      }, 1000);
    },
    revertSlideshow() {
      clearInterval(intervalId);
      intervalId = null;
    }
  }
})();

// 调用方式
// slideshowController.beginSlideshow();
// slideshowController.revertSlideshow();

方案2：函数属性存储（无需额外封装结构） #

利用JS中函数也是对象的特性，把定时器ID直接挂载到beginSlideshow函数本身的属性上，不会占用全局变量空间，适合轻量场景使用。

function beginSlideshow() {
  // 先清除已存在的定时器
  if (beginSlideshow.interval) clearInterval(beginSlideshow.interval);
  beginSlideshow.interval = setInterval(function () {
    // 幻灯片轮播业务逻辑
  }, 1000);
}

function revertSlideshow() {
  clearInterval(beginSlideshow.interval);
  beginSlideshow.interval = null;
}

方案3：DOM自定义属性存储（绑定轮播元素场景） #

如果轮播逻辑关联了具体的DOM元素，可以把定时器ID存在元素的dataset属性上，和元素生命周期绑定，更符合组件化开发的逻辑，尤其适合多轮播实例的场景。

// 入参为轮播容器对应的DOM元素
function beginSlideshow(slideshowEl) {
  if (slideshowEl.dataset.intervalId) clearInterval(slideshowEl.dataset.intervalId);
  const intervalId = setInterval(function () {
    // 幻灯片轮播业务逻辑
  }, 1000);
  slideshowEl.dataset.intervalId = intervalId;
}

function revertSlideshow(slideshowEl) {
  clearInterval(slideshowEl.dataset.intervalId);
  delete slideshowEl.dataset.intervalId;
}

方案4：ES模块顶层存储（模块化开发场景） #

如果是基于ES模块开发，直接在模块顶层声明定时器变量即可，模块顶层作用域独立，不会污染全局作用域，是工程化项目最常用的实现方式。

// slideshow.js 独立模块内
let intervalId = null;

export function beginSlideshow() {
  if (intervalId) clearInterval(intervalId);
  intervalId = setInterval(() => {
    // 轮播业务逻辑
  }, 1000)
}

export function revertSlideshow() {
  clearInterval(intervalId);
  intervalId = null;
}

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