Question

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

我的代码如下：

---- ----修订 对于slideShow，我有一个div名称divForImages和i .append（）在该特定div中的新图像。我使用.append（）函数。我的算法非常简单： FadeOut上一个图像和.append（）使用Fadein函数新图像。所以新的更新版本是：

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 mousover li时，幻灯片显示不会开始立即自动播放，但等待4秒！

当然，我已将时间定义为4000秒

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

先谢谢

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/

与hover和setInterval相关的问题

3 个答案: