Помогите разобраться с setTimeout

[arkadii_parovozov]

Здравствуйте господа!

Решил сделать мини слайдер на js:

function nextSlide(slide){
	currentSlide = slide;
	
	if(currentSlide == 0 || currentSlide == 3)
	{
		currentSlide = 1;
		$("#s2,#s3").css("visibility", "hidden");
		$("#s1").css("visibility", "visible");
		setTimeout(nextSlide(1),2000);
	}
	else if(currentSlide == 1)
	{
		currentSlide = 2;
		$("#s1,#s3").css("visibility", "hidden");
		$("#s2").css("visibility", "visible");
		setTimeout(nextSlide(2),2000);
	}
	else
	{
		currentSlide = 3;
		$("#s1,#s2").css("visibility", "hidden");
		$("#s3").css("visibility", "visible");
		setTimeout(nextSlide(3),2000);
	}
}

Функция nextSlide(0); вызывается при загрузки страницы.

Я так понимаю что setTimeout вызывает функцию через заданное количество миллисекунд, но функция не зацикливается. Пытался реализовать через setInterval(nextSlide(currentSlide),2000); но переменная currentSlide не видна за пределами функции nextSlide.

в принципе удобней было бы реализовать с помощью setTimeout для каждого блока if-else так как в этом случае можно будет прописывать разное время задержки для каждой картинки. Но не могу понять принцип работы setTimeout.

[рони]

arkadii_parovozov,
в setTimeout аргументом должна быть функция, а не её результат!!!
вместо nextSlide(3) и подобного, сделайте так

function() {
nextSlide(3)
}

[ruslan_mart]

Или так:

setTimeout(nextSlide.bind(null, 1), 2000);
setTimeout(nextSlide.bind(null, 2), 2000);
setTimeout(nextSlide.bind(null, 3), 2000);

[arkadii_parovozov]

рони, Спасибо за разъяснение!!!

Ruslan_xDD, Спасибо за компактный код!!! Хоть и не понял как он работает )) Не могли бы пояснить что это за конструкция .bind(null, 3)?

[ruslan_mart]

arkadii_parovozov,
https://developer.mozilla.org/ru/doc.../Function/bind

[arkadii_parovozov]

Еще вопрос, если позволите.

Можно ли поставить setTimeout на паузу если курсор находится в

$("#blok").mouseenter(function(){});

[рони]

arkadii_parovozov,

var x, currentSlide ;
 function nextSlide(slide){
    x =  setTimeout
    //...
    x =  setTimeout
    //...
    x =  setTimeout
 }
$("#blok").mouseenter(function(){window.clearTimeout(x)}).mouseleave(function(){nextSlide(currentSlide); });

[ruslan_mart]

var delay = 2000,
    callback = function() {
        nextSlide(1);
        timeoutId = null;
    },
    timeoutId = setTimeout(callback, delay),
    time = Date.now();;

$("#blok").mouseenter(function() {
    clearTimeout(timeoutId);
}).mouseleave(function() {
    if(timeoutId) {
        var n = Date.now() - time;

        if(n > delay) {
            callback();
        }
        else {
            timeoutId = setTimeout(callback, delay - n);
        }
    }
});

[arkadii_parovozov]

рони,
Ruslan_xDD,

Ребята, спасибо за помощь!!!

Разработчикам нужно намекнуть, что если есть set и clearTimeout то пора создать и pause / startTimeout ))

[ruslan_mart]

Поправил пост, так как забыл кое-что учесть.