Question

我在点击的div数组上设置了一个间隔。我需要一种方法来清除悬停在特定div上的间隔以暂停间隔，然后在不悬停在特定div上时返回设置间隔。

<script type="text/javascript">
var arr = ['#tog1', '#tog2', '#tog3', '#tog4', '#tog5', '#tog6', '#tog7', '#tog8', '#tog9'];

var index = 0;
setInterval(function () {
$(arr[index++]).trigger('click');
if (index == arr.length)
}, 4000);
</script>

因此，如果我将鼠标悬停在名为.compBox的div上，则需要清除间隔，并且非悬停时返回setinterval。

**更新**

所以使用下面的一些建议我现在在这里，所以看起来它会识别我在.compBox上空盘旋但是阵列上的间隔没有停止：

var arr = ['#tog1', '#tog2', '#tog3', '#tog4', '#tog5', '#tog6', '#tog7', '#tog8', '#tog9', '#tog10'];
var index = 0;
var int = setInterval(function() {
    console.log("working")
    $(arr[index++]).trigger('click');
    if (index == arr.length)
        index = 0

}, 4000);


function handleInterval() {
    $('.compBox').hover(function() {
        //When the mouse enters the container, clear the interval
        clearInterval(int)
    }, function() {
        //When the mouse leaves the container, reset the interval
setInterval(function() {
    console.log("working")
    $(arr[index++]).trigger('click');
    if (index == arr.length)
        index = 0

}, 4000);
    });
}
handleInterval();

Answer 1

为什么不使用阻止计时器执行其功能的标志（hovered_flag）？

var hovered_flag = false;

$(".dont_trigger").hover(function(e){
  hovered_flag = true;
  console.log("prevent triggering");
},function(e){
  hovered_flag = false;
  console.log("allow triggering");
});

setInterval(function() {
  if (hovered_flag) return
  console.log("trigger click");
}, 1000);

.dont_trigger {
  width: 120px;
  height: 50px;
  background-color: #f44;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dont_trigger"></div>

Answer 2

尝试使用Jquery-Timer插件。

Answer 3

这是我在几年前做过的滑块的代码片段... https://github.com/drmjo/jquery-slider/blob/master/js/jquery.uc-slider.js#L165

从某种意义上说，你不能真正停留在思考...所以我一起清除所有间隔并在鼠标事件中重新启动它......

// here starts the initial auto play function.....

this.intervalID = setInterval(function(){

    pos = autoplay(pos, slideCount);

},options.autoplayTimer);


var intervalID = this.intervalID;   //making the intervalID passable

// autostop on mouseover  and start on mouse out... 
this.mouseleave(function(){
    intervalID = setInterval(function(){
      pos = autoplay(pos, slideCount);
    },options.autoplayTimer);
}); 

//Start the auto play on mouse leave... :)
this.mouseenter(function(){
    clearInterval(intervalID);
});

Answer 4

＆＃13;

    var int = setInterval(function() {
        console.log("working")
    }, 1000);

    function handleInterval() {
        $('.compBox').hover(function() {
            //When the mouse enters the container, clear the interval
            clearInterval(int)
        }, function() {
            //When the mouse leaves the container, reset the interval
            int = setInterval(() => console.log("working"), 1000);
        });
    }
    handleInterval();

＆＃13;

.compBox {
  height: 100px;
  width: 100px;
  background: blue;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="compBox">
</div>

＆＃13;

这是我的解决方案。请注意，我已将间隔存储为变量，因此当鼠标进入目标时我可以重置它，并在鼠标离开时重新启动间隔。请注意，我使用es6，但您也可以使用vanilla js。

悬停在div上时暂停一个间隔

4 个答案: