Question

我有一个图片库，可以在www.creat3dprinters.com上的旋转器类div上旋转，暂停mouseenter，然后在mouseleave后1秒再次触发。

但是，如果用户将鼠标快速移入和移出旋转器类div，则函数会调用堆栈并显示可见的更改，直到“堆栈”为止。完成了。

我希望在第2个及以后mouseenter取消尚未完成的1秒延迟，以免发生这种情况。

我尝试在clearTimeout函数中使用mouseenter，但它似乎不起作用。

我知道还有stop()功能，但这也不起作用。

任何建议都非常感谢。

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之前调用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");
    }
}

暂时禁用javascript函数，以便在mouseleave之后重复

1 个答案: