关于hover和setInterval的问题

Question

我使用悬停功能，并且在鼠标悬停时 setInterval 函数开始工作 和onmouseout我清除setInterval函数

我的代码如下：

----更新---- 对于幻灯片，我有一个 div 名称 divForImages 和我 .append() 该特定 div 中的新图像。我使用 .append() 函数。 我的算法非常简单： 使用 Fadein 函数淡出前一个图像并 .append() 新图像。 所以新的更新版本是：

var IntervalID;    

$("li").hover(
            function() {                                                        
                    IntervalID = setInterval(function() {
                                    //a slideshow begins to auto play...

                        $(".divForImages img").fadeOut(1000); //previous image

                        var item = $('<img src="'+attribute_of_href+'"   width="200" height="100" style="left:0px;top:0px;position:absolute"  />').css({"display":"none"}); //new image that is going to be faded in
                       $(".divForImages").append(item);/* new */

                       item.fadeIn(1000);
                                    }, 4000);
                       },
            function() {                
                    clearInterval(IntervalID);
                        });

我定义的毫秒是4000。 问题是，当我首先将鼠标悬停在 li 上时，幻灯片不会开始 立即自动播放，但等待 4 秒！

当然，我已经定义了 4000 秒的时间，

我可以让 setInterval 在鼠标悬停时立即启动而不是等待 4000 毫秒吗？

提前致谢

Answer 1

试试这个：

function playSlideShow() {
    //a slideshow begins to auto play...
}

$("li").hover(
    function() {    
            playSlideShow();    // start playing immediately        
            IntervalID = setInterval(playSlideShow, 4000);
    },
    function() {                
            clearInterval(IntervalID);
    });

Answer 2

您需要使用 settimeout 而不是 setinterval

了解更多信息，请检查 setinterval 与 settimeout

Answer 3

当然，只需命名该函数，立即调用它，然后让它按名称将其自身返回给 setInterval()。

var IntervalID;
var slideshow = function () {
        //a slideshow begins to auto play...
    return slideshow; // <-- the return value lets you invoke and pass it.
};

$("li").hover( function () {
    IntervalID = setInterval( slideshow(), 4000);
}, function () {
    clearInterval(IntervalID);
});

示例： http://jsfiddle.net/Hgwt8/