清除间隔在鼠标输入上不起作用

clearinterval not working on mouseenter

本文关键字：输入 不起作用 鼠标 清除      更新时间：2024-04-15

清除间隔在滑块中不起作用 我已经尝试了很多，但面对同样的问题，有没有人可以说出这里有什么问题以及如何解决这个问题？这是 Jquery 中的图像滑块

<script>
  $(document).ready(function() {
    var current = 2;
    var sl = $(".aa").length;
    var interval;
    function startSlider() {
      interval = setInterval(function() {
        $(".slider-wrapper").delay(2000);
        $(".slider-wrapper").animate({
          'margin-left': '-=910'
        }, 2000, function() {
          current++;
          if (current === sl) {
            current = 1;
            $(".slider-wrapper").delay(2000).animate({
              'margin-left': '0'
            }, 2000);
          }
        })
      }, 3000);
    }
    function stopSlider() {
      clearInterval(interval);
    }
    $(".slider-wrapper").on('mouseenter', stopSlider).on('mouseleave', startSlider);
    startSlider();
  });
</script>
原因是

因为interval变量是一个全局变量(与窗口相关联，如果我们在窗口的上下文中，可以使用window.interval或interval访问(

而当你在$(".slider-wrapper").on('mouseenter'内部调用stopSlider时，this关键字引用$(".slider-wrapper")元素而不是window。

换句话说，interval不是在这种情况下定义的。

要解决此问题，只需在窗口的上下文中执行stopSlider，如下所示： stopSlider.call(window)而不是stopSlider.

希望这有帮助。

相关文章：