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选择器限制为特定的上下文。

为什么在悬停后清除间隔会加快旋转速度

1 个答案: