CODEWITHSUNDEEP
jquerytimersetinterval
adamdehaven
adamdehaven

Reputation: 5920

setInterval with jQuery - pause on mouseenter and resume on mouseleave

I wrote a function in jQuery that rotates a series of text blocks like a carousel. I'm using setInterval to start a timer that runs in a loop, which starts automatically on page load, pauses for mouseenter events, and then is supposed to resume on mouseleave events.

The pausing works for the FIRST instance, but if you enter your mouse over div.testimonials a second time, the function does not pause. Here's my HTML:

<div class='testimonials'>
          <div class='testimonials-users row hidden-phone'>
            <div class='span1'> <a class='testimonials-user-w active' data-toggle='testimonial' href='#testimonial1'> <span class='testimonials-user'><img alt="Avatar-1" src="images/test-user.png" /></span> </a> </div>
            <div class='span1'> <a class='testimonials-user-w' data-toggle='testimonial' href='#testimonial2'> <span class='testimonials-user'><img alt="Avatar-2" src="images/test-user.png" /></span> </a> </div>
            <div class='span1'> <a class='testimonials-user-w' data-toggle='testimonial' href='#testimonial3'> <span class='testimonials-user'><img alt="Avatar-4" src="images/test-user.png" /></span> </a> </div>
          </div>
          <div class='testimonials-speeches'>
            <div class="testimonials-speech active" id="testimonial1">
              <p> <strong>Homer Simpson is amazing.</strong> I've worked with Homer on couple of projects and i really like how lazy he is. Sleeps a lot, does not compain much, a perfect employee. </p>
              <div class="speech-by"> Mr. Burns, Springfield Nuclear Power Plant </div>
            </div>
            <div class='testimonials-speech' id='testimonial2'>
              <p> <strong>Nulla gravida tellus id fermentum.</strong> Phasellus aliquet lobortis dolor, vel aliquam tortor porta vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. </p>
              <div class='speech-by'> John Doe, Dundler Mufflin </div>
            </div>
            <div class='testimonials-speech' id='testimonial3'>
              <p> <strong>Aliquam at sodales arcu.</strong> Nulla gravida, tellus id fermentum tempus, urna elit tempus justo, a tincidunt dui lacus nec est. Maecenas ligula ipsum, suscipit quis posuere id, porttitor vitae odio. Phasellus cursus mauris nec felis sollicitudin ac semper quam hendrerit. Morbi sagittis lobortis libero id imperdiet. </p>
              <div class='speech-by'> John Doe, Dundler Mufflin </div>
            </div>
          </div>
        </div>

...and here is my jQuery:

$(function () {
    var rotateTestimonialTimer = setInterval(rotateTestimonials, 1000); // set interval timer

    function abortTestimonialTimer() { // to be called when you want to stop the timer
        clearInterval(rotateTestimonialTimer);
    }

    function rotateTestimonials() { 
        // Speeches
        var activeSpeech = $('.testimonials-speeches .testimonials-speech.active');
        // If last, loop to first
        if($('.testimonials-speeches .testimonials-speech').last().hasClass('active')) {
            var nextSpeech = $('.testimonials-speeches .testimonials-speech').first();
        } else {
            var nextSpeech = activeSpeech.next('.testimonials-speech');
        }
        var nextSpeechId = nextSpeech.attr('id');

        // Users
        var activeUser = $('a.testimonials-user-w.active');
        var nextUser = $('a.testimonials-user-w[href*="' + nextSpeechId + '"]');

        // Swap active class
        activeSpeech.removeClass('active');
        activeUser.removeClass('active');
        nextSpeech.addClass('active');
        nextUser.addClass('active');

    }
    $('div.testimonials').on('mouseenter', function(){ // Pause on mouseenter
    abortTestimonialTimer(); 
});
$('div.testimonials').on('mouseleave', function(){ // Resume on mouseleave
    var rotateTestimonialTimer = setInterval(rotateTestimonials, 1000);
});
});

Any idea why this only pauses the first time? I think it has something to do with my starting and stopping of the timer.

Upvotes: 0

Views: 2595

Answers (1)

Kundan Singh Chouhan
Kundan Singh Chouhan

Reputation: 14292

Replace this 

$('div.testimonials').on('mouseleave', function(){ // Resume on mouseleave
    var rotateTestimonialTimer = setInterval(rotateTestimonials, 1000);
});

With

$('div.testimonials').on('mouseleave', function(){ // Resume on mouseleave
    rotateTestimonialTimer = setInterval(rotateTestimonials, 1000);
});

The var is defining new variable in that particular scope.

Upvotes: 3

Related Questions