javascript - Temporarily disabling javascript function from repeating after mouseleave

Question

I have an image gallery that rotates through the rotator class divs on www.creat3dprinters.com that pauses on mouseenter and then fires again 1 second after mouseleave.

However, if a user moves the mouse in and out of the rotator class div quickly the function calls stack up and the visible changes until the 'stack' is completed.

I want the 1 second delay that has not been completed to be cancelled on the 2nd and subsequent mouseenter so that this does not happen.

I have tried using clearTimeout within the mouseenter function but it does not seem to work.

I know there is also the stop() function but that did not work either.

Any suggestions greatly appreciated.

jQuery(document).ready(function () {
    var initList = setInterval('RotateIt()', 4000);

    $('.rotator').mouseenter(function () {
        clearInterval(initList);
    }).mouseleave(function () {
        timeout = setTimeout(function () {
            RotateIt()
        }, 1000);
        initList = setInterval('RotateIt()', 4000);
    })
});



function RotateIt() {
    clearTimeout(timeout);

    if ($('#rotator-visible').next('.rotator').length == 0) {
        $('.rotator:first').attr('id', 'rotator-visible');
        $('.rotator:last').removeAttr("id");

    } else {
        $('#rotator-visible').removeAttr("id").next('.rotator').attr("id", "rotator-visible");
    }
}

Answer 1

如果用户将鼠标快速移入和移出旋转器类 div，则函数调用会叠加

然后clearTimeout它——而且正是在那个地方，不仅仅是在延迟的RotateIt. clearTimeout最简单的解决方案是每次调用before setTimeout，这样您就可以确定一次只有一个活动超时。

jQuery(document).ready(function($) {
    var initList = setInterval(rotateIt, 4000),
        delay = null;

    $('.rotator').mouseenter(function(e) {
        clearInterval(initList);
    }).mouseleave(function(e) {
        clearTimeout(delay);
        delay = setTimeout(function () {
            rotateIt();
            initList = setInterval(rotateIt, 4000);
        }, 1000);
    })
});

function rotateIt() {
    if ($('#rotator-visible').next('.rotator').length == 0) {
        $('.rotator:first').attr('id', 'rotator-visible');
        $('.rotator:last').removeAttr("id");
    } else {
        $('#rotator-visible').removeAttr("id").next('.rotator').attr("id", "rotator-visible");
    }
}