hover上的clearInterval和setInterval onmouseout

Question

我创建了一个自动滑动的旋转木马每5秒钟(以及手动按钮移动幻灯片).我希望能够在鼠标悬停在幻灯片上时暂停滚动,并在鼠标不再悬停时恢复.

到目前为止,我的脚本将执行以上所有操作.
但是它不会在页面加载时启动,您必须将鼠标悬停在然后取消悬停才能启动.

这是我的脚本:

jQuery('#viewport').hover(function () {
    window.clearInterval(timer);
}, function () {
    timer = window.setInterval(function () {
        jQuery('#next').trigger('click');
    }, 1000);
});

我该怎么做才能让它立即开始滑动？

Answer 1

jQuery('#viewport').on({
    mouseenter: function() {
        clearInterval( $(this).data('timer') );
    },
    mouseleave: function() {
        $(this).data('timer', setInterval(function () {
            jQuery('#next').trigger('click');
        }, 1000));
    }
}).trigger('mouseleave');