javascript - 在循环中添加事件监听器 (mouseenter)，但仅在 1500 毫秒后触发 - 清除超时问题

Question

我有一个图像网格，用户可以将鼠标悬停在其中进行预览。我可以为循环中的每个监听器添加一个监听器。我只想在用户在该项目上停留至少 1.5 秒时触发我的逻辑。我无法确定为什么尝试清除计时器超时的 mouseleave 事件实际上并未清除它。

我在代码中添加了注释来澄清:

(function () {
  var nodeList = document.querySelectorAll('div.MyDiv > img') || undefined;
  if (nodeList) {
    nodeList.forEach(function (_el, idx) {
      _el.addEventListener("mouseenter", function (e) {
        var _imgsrcga = e.srcElement.src;
         var timer = setTimeout(function() {
            console.log('This ran'); // this is OK after 1.5 seconds, but it ALWAYS runs after 1.5 seconds
        }, 1500)
      }, false);

      // not clearing the timer....
      _el.addEventListener("mouseleave", function(e) {
        console.log('cleared')
        clearTimeout(timer) // my timer never clears with a mouseleave event
      })
    })
  }
})();

所以:我的 console.log('this ran') 实际上延迟了 1.5 秒，但如果它们在 < 1.5 秒内鼠标离开，我永远无法摆脱我的计时器。

谢谢

Answer 1

变量“计时器”在清洁功能中不可见。它是“mouseenter”事件函数的私有(private)变量。