悬停时的clearInterval和mouseout时的setInterval

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');

Answer 2

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

Answer 3

$(document).ready(function()
{
    // Your code there.
});