CODEWITHSUNDEEP
jquery
PhpDude
PhpDude

Reputation: 1600

Pause an interval when hovering on div

I have set an interval on an array of divs that click through. I need a way to clear the interval when hovering over a specific div to pause the interval and then return the set interval when not hovering on that specific 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>

So if I hover on a div called .compBox it needs to clear the interval and when non hovering return back to setinterval.

** UPDATE **

so using some of the advice below I am now here, So it would appear that it recognises me hovering over .compBox but the interval on the array isnt stopping:

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

Upvotes: 1

Views: 1179

Answers (4)

Sean Kwon
Sean Kwon

Reputation: 907

    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>

Here's my solution. Note that I've stored the interval as a variable so I can reset it when the mouse enters the target and restart the interval when the mouse leaves. Note that I'm using es6, but you can use vanilla js as well.

Upvotes: 1

Drmjo
Drmjo

Reputation: 584

here's a code snippet from a slider i did some years back ... https://github.com/drmjo/jquery-slider/blob/master/js/jquery.uc-slider.js#L165

you can't really Pause in a sense you are thinking ... so i clear the interval all together and restart it on mouse events...

// 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);
});

Upvotes: 1

jcuenod
jcuenod

Reputation: 58405

Why not use a flag (hovered_flag) that prevents your timer from executing its function?

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>

Upvotes: 3

ISHIDA
ISHIDA

Reputation: 4868

Try using Jquery-Timer plugin.

Upvotes: 0

Related Questions