Question

我在jQuery中编写了一个函数来旋转一系列文本块，如旋转木马。我正在使用setInterval启动一个在循环中运行的计时器，该计时器在页面加载时自动启动，暂停mouseenter个事件，然后应该在mouseleave个事件上恢复。 / p>

暂停适用于FIRST实例，但如果您再次在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：

$(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正在该特定范围内定义新变量。

使用jQuery的setInterval - 在mouseenter上暂停并在mouseleave上恢复

1 个答案: