停止和重置滑块设置间隔

Question

我搜索了不同的帖子，但仍然无法完全理解该怎么做。

这是我的滑块的 setInterval 代码。因为它是一个滑块，所以间隔从页面加载开始。 一旦我 mouseleave 间隔速度更快，这意味着我假设我同时进行了两个，但是我不确定如何在 mouseleave 处平稳地停止它并在 mouseleave 上以相同的速度再次运行。

var interval = setInterval(slideInterval, 4500);

$('.main-container').on('mouseenter', function(){
    clearInterval(interval);

});
, $('.main-container').on('mouseleave', function() {
    setInterval(slideInterval, 4500);
});

Answer 1

这是因为当您离开元素时，您会创建一个没有 var 分配的新间隔，以便接下来清除它。

它会在同一个 DOM 元素上产生越来越多的间隔。这是固定代码：

var A = document,
    B = window,
    a = 0,
    b = function(c){return A.getElementsByTagName(c)[0]},
    d = setInterval(function(){b('div').innerHTML = ++a;}, 1000);
b('div').onmouseover = function(){clearInterval(d);}
b('div').onmouseleave = function (){d = setInterval(function(){
  b('div').innerHTML = ++a;
}, 1000);}

div{width:500px;height:150px;border:1px solid black;}

<div></div>

我在没有 jquery 的情况下用 javascript 完成了它