使用setInterval实现hover时添加随机类，无法停止循环如何解决？

你的问题核心是定时器变量的作用域问题：randomClassTimer被定义在mouseenter事件的局部作用域里，mouseleave事件根本访问不到它；而全局变量又会导致多次调用或多元素场景下的冲突。

解决方案：利用函数作用域共享变量 #

把定时器变量声明在myFunction的函数作用域内，这样两个事件处理函数都能访问到，同时不会污染全局环境。另外要注意在mouseenter时先清除已有定时器，避免重复触发导致多个定时器并行。

修改后的代码：

function myFunction() {
  // Vars
  var classes = [
    "class-1",
    "class-2",
    "class-3",
  ];
  // 把定时器变量放在函数作用域内，两个事件都能访问
  let randomClassTimer;

  // On mouseenter
  el.on("mouseenter touchstart", function () {
    // 先清除可能存在的旧定时器，防止重复触发
    clearInterval(randomClassTimer);
    // 启动新定时器
    randomClassTimer = setInterval(function () {
      // Remove all previous classes
      el.removeClass(classes.join(" "));
      // Add new random class
      el.addClass(
        classes[Math.floor(Math.random() * classes.length)]
      );
    }, 300);
  });

  // On mouse leave
  el.on("mouseleave touchend", function () {
    // 清除定时器
    clearInterval(randomClassTimer);
    // 可选：离开时移除所有类名，恢复初始状态
    el.removeClass(classes.join(" "));
  });
}

多元素场景的优化方案 #

如果el是多个DOM元素（比如jQuery选择器匹配了多个元素），上面的方案会导致所有元素共用同一个定时器，出现混乱。这时可以用jQuery的data()方法为每个元素单独存储定时器：

function myFunction() {
  var classes = [
    "class-1",
    "class-2",
    "class-3",
  ];

  el.on("mouseenter touchstart", function () {
    const $this = $(this);
    // 清除当前元素的旧定时器
    clearInterval($this.data('randomClassTimer'));
    const timer = setInterval(function () {
      $this.removeClass(classes.join(" "))
           .addClass(classes[Math.floor(Math.random() * classes.length)]);
    }, 300);
    // 把定时器存在当前元素的data里
    $this.data('randomClassTimer', timer);
  });

  el.on("mouseleave touchend", function () {
    const $this = $(this);
    clearInterval($this.data('randomClassTimer'));
    $this.removeClass(classes.join(" "));
    // 移除存储的定时器数据
    $this.removeData('randomClassTimer');
  });
}

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