暂停在div上悬停的时间间隔

我已经在单击的div数组上设置间隔。我需要一种方法来清除鼠标悬停在特定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>

所以，如果我悬停在一个div称为.compBox它需要清除的时间间隔，当非盘旋返回到的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();

来源

2017-03-06 PhpDude

你没有重置初始化int变量作为mouseleave上的间隔。出于您的目的，我建议使用@jcuenod解决方案，因为它不会处理太多的全局变量，就像我的做法一样。 –

@SeanKwon我正在努力使它与我有的代码一起工作，很努力去理解tia这个例子的哪些地方，你能提供建议吗？ – PhpDude

检查这个小提琴https://jsfiddle.net/j2bdL8op/我用控制台替换你的触发器点击 –

为什么不使用阻止定时器执行其功能的标志（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>

来源

2017-03-06 21:09:26 jcuenod

其实，即使使用'hovered_flag'，间隔也不会继续运行，只是无法执行console.log？ –

@SeanKwon是的，时间间隔还在继续，关键是它只是“返回”而不是做某事。如果间隔时间很重要（即如果真的很重要，从div不再徘徊的那一刻开始需要4s）。 – jcuenod

我正在努力实现这个代码，我使用它似乎是相当不正常。在控制台中它告诉我它在间隔时间内的工作，然后创建一个新的日志实例。真的很奇怪，我不能发现模式 – PhpDude

尝试使用Jquery-Timer插件。

来源

2017-03-06 21:08:20 ISHIDA

这里是从一个滑块我做了一些几年前的代码片段... 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); 
});

来源

2017-03-06 21:10:15 Drmjo

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();

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

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

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

来源

2017-03-06 21:11:10

这将如何与我的阵列工作？ – PhpDude

暂停在div上悬停的时间间隔

回答

相关问题