Вопрос, связанный с hover и setInterval

Question

Я использую функцию наведения мыши, и при наведении курсора начинает работать функция setInterval и onmouseout я очищаю функцию setInterval

Мой код выглядит следующим образом:

---- ОБНОВЛЕНО ---- Для слайд-шоу у меня есть имя div divForImages и я .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 вставил мышкой ли, слайд-шоу не начинается для автоматического воспроизведения, но оно ждет 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

Конечно, просто назовите функцию, немедленно ее вызвали, и пусть она вернется по имени к 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/

Answer 3

Вам нужно использовать settimeout вместо setinterval

чтобы узнать больше проверьте setinterval vs settimeout