与悬停和 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。 问题是当我 FIRST 将鼠标悬停在 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 vs 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/