如何使用jQuery实现多个li元素悬停移出后独立延时重置背景色功能

问题根因 #

原有代码使用全局唯一的timer变量存储定时器ID，任意li触发移出悬停逻辑时都会覆盖全局timer的取值，导致其余li的定时器ID丢失无法触发，最终仅最后一个移出悬停的li可以正常恢复背景色。

修复方案 #

利用jQuery的.data()方法为每个li元素单独存储专属的定时器ID，各元素的计时逻辑完全独立互不干扰，无需全局变量存储定时器。

修复后的JS代码 #

$(document).ready(function () {
  $("li").hover(
    function () {
      // 仅清除当前悬停li自身绑定的定时器
      clearTimeout($(this).data('resetTimer'));
      $(this).css("background-color", "red");
    },
    function () {
      const $currentLi = $(this);
      // 将当前li的定时器ID存储到自身自定义数据中
      const resetTimer = setTimeout(function () {
        $currentLi.css("background-color", "transparent");
      }, 1000);
      $currentLi.data('resetTimer', resetTimer);
    }
  );
});

说明 #

• HTML代码无需修改，保持原有结构即可正常运行
• 修复后各li的背景恢复计时完全独立，快速切换多个li悬停状态时，每个li都会按照自身移出的时间倒计时恢复背景色，不会出现之前遗漏重置的问题

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