javascript - 为什么悬停后清除间隔会加速旋转

Question

我正在处理的网站上有一个旋转滑块。

加载页面时滑块会自动滚动，并且应该在鼠标悬停时停止，然后在鼠标离开时重新开始。

我停止了滑块的工作，但是当我将鼠标移出时，滑块再次启动，但速度是原来的两倍，导致滑块不显示任何内容。

我的清除间隔不能正常工作有什么原因吗？我怎样才能让滑块停止和启动而不改变速度和搞砸？

     rotateSwitch: function() {  
       var myTimer=setInterval(function() { this.autoRotate(); }.bind(this), 5000);
       $('.hero img').hover(
         function() {
         window.clearInterval(myTimer)},
         function() {
         this.rotateSwitch();}.bind(this));
    },       

Answer 1

在每次 mouseleave 时，您通过调用再次绑定该函数this.rotateSwitch()。相反，只需再次开始间隔：

rotateSwitch: function() {  
    var myTimer,
        that = this;
    function start() {
        myTimer = setInterval(that.autoRotate.bind(that), 5000);
    }
    function stop() {
        clearInterval(myTimer);
    }
    $('.hero img').hover(stop, start);
    start();
},

如果该函数被多次调用，您可能还希望将.hero img选择器限制在特定的上下文中。