Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.06.2017, 11:32
Аспирант
Отправить личное сообщение для arkadii_parovozov Посмотреть профиль Найти все сообщения от arkadii_parovozov
 
Регистрация: 24.11.2016
Сообщений: 96

Помогите разобраться с setTimeout
Здравствуйте господа!

Решил сделать мини слайдер на 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.
Ответить с цитированием
  #2 (permalink)  
Старый 01.06.2017, 12:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,367

arkadii_parovozov,
в setTimeout аргументом должна быть функция, а не её результат!!!
вместо nextSlide(3) и подобного, сделайте так
function() {
nextSlide(3)
}
Ответить с цитированием
  #3 (permalink)  
Старый 01.06.2017, 12:16
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,932

Или так:

setTimeout(nextSlide.bind(null, 1), 2000);
setTimeout(nextSlide.bind(null, 2), 2000);
setTimeout(nextSlide.bind(null, 3), 2000);
Ответить с цитированием
  #4 (permalink)  
Старый 01.06.2017, 12:47
Аспирант
Отправить личное сообщение для arkadii_parovozov Посмотреть профиль Найти все сообщения от arkadii_parovozov
 
Регистрация: 24.11.2016
Сообщений: 96

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

Ruslan_xDD, Спасибо за компактный код!!! Хоть и не понял как он работает )) Не могли бы пояснить что это за конструкция .bind(null, 3)?
Ответить с цитированием
  #5 (permalink)  
Старый 01.06.2017, 12:49
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,932

arkadii_parovozov,
https://developer.mozilla.org/ru/doc.../Function/bind
Ответить с цитированием
  #6 (permalink)  
Старый 01.06.2017, 13:00
Аспирант
Отправить личное сообщение для arkadii_parovozov Посмотреть профиль Найти все сообщения от arkadii_parovozov
 
Регистрация: 24.11.2016
Сообщений: 96

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

Можно ли поставить setTimeout на паузу если курсор находится в
$("#blok").mouseenter(function(){});
Ответить с цитированием
  #7 (permalink)  
Старый 01.06.2017, 13:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,367

arkadii_parovozov,
var x, currentSlide ;
 function nextSlide(slide){
    x =  setTimeout
    //...
    x =  setTimeout
    //...
    x =  setTimeout
 }
$("#blok").mouseenter(function(){window.clearTimeout(x)}).mouseleave(function(){nextSlide(currentSlide); });
Ответить с цитированием
  #8 (permalink)  
Старый 01.06.2017, 13:12
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,932

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);
        }
    }
});

Последний раз редактировалось ruslan_mart, 01.06.2017 в 13:46.
Ответить с цитированием
  #9 (permalink)  
Старый 01.06.2017, 13:45
Аспирант
Отправить личное сообщение для arkadii_parovozov Посмотреть профиль Найти все сообщения от arkadii_parovozov
 
Регистрация: 24.11.2016
Сообщений: 96

рони,
Ruslan_xDD,

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

Разработчикам нужно намекнуть, что если есть set и clearTimeout то пора создать и pause / startTimeout ))
Ответить с цитированием
  #10 (permalink)  
Старый 01.06.2017, 13:47
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,932

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите разобраться с функцией .height() kos0760 Элементы интерфейса 2 25.05.2017 00:51
Помогите разобраться с mouseenter / mouseleave и setTimeout alecto jQuery 33 30.06.2016 16:42
Помогите начинающему разобраться с setTimeout Rain Events/DOM/Window 6 09.08.2011 21:18
Помогите пожалуйста разобраться Kupu4 Ваши сайты и скрипты 0 21.01.2010 10:44
Помогите разобраться с галереей IMAGIN yana_studio Общие вопросы Javascript 4 12.12.2009 17:24