带jQuery的setInterval -在鼠标回车键上暂停，在鼠标离开时恢复

Question

我用jQuery编写了一个函数，可以像旋转木马一样旋转一系列文本块。我使用setInterval启动一个在循环中运行的计时器，该计时器在页面加载时自动启动，在发生mouseenter事件时暂停，然后在发生mouseleave事件时恢复。

暂停适用于第一个实例，但如果第二次在div.testimonials上输入鼠标，则函数不会暂停。这是我的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>

下面是我的jQuery：...and：

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

你知道为什么只有第一次暂停吗？我认为这与我启动和停止计时器有关。

Answer 1

替换这个

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

使用

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

var正在该特定范围内定义新变量。