Вторник, 26 Июня 2012 14:55

Методы setInterval и setTimeout в jQuery

Written by 
Оцени эту запись
(50 Голоса)

В данной статье рассмотрим методы setInterval и setTimeout, как их можно использовать и чем они отличаются.

 

 

setInterval - повторяет определенные действия через указанный промежуток времени:

 

setInterval (function(){}, 5000); - внутренняя функция будет выполняться каждые 5 секунд

 

При помощи этого метода можно делать разного рода таймеры, скроллеры и слайдеры с автоматической прокруткой и т.д.

 

Пример:

 

 

setInterval(function(){
var c;
var c2;
var b = $('.slider_switch ul li').size();
for(i=0;i<b-1;i++) {
if($('.slider_switch ul li').eq(i).hasClass('active')) {
c = i;
c2 = c+1;
}
}
if ($('.slider_switch ul li').eq(b-1).hasClass('active')) {
c = b-1;
c2 = 0;
}
$('.slider_switch ul li').eq(c).removeClass('active');
$('.slider_switch ul li').eq(c2).addClass('active');
$('.slider_photo .slider_photo_item').eq(c).fadeOut(0);
$('.slider_photo .slider_photo_item').eq(c2).fadeIn(800);
$('.slider_right_items .slider_right_item').eq(c).fadeOut(0);
$('.slider_right_items .slider_right_item').eq(c2).fadeIn(10);
if(c=4){c=0;}
},5000);
 
 
Этод код описывает автопереключение слайдов слайдера каждые 5 секунд. Здесь функция определяет какой по счету слайдер в данный момент показан, скрывает его и показывает следующий (по индексу). Промежуток времени delay указывается после функции - setInterval (function(){}, delay) и задается в миллисекундах, то есть 1000 - это одна секунда.
 
 
setTimeout - задает отсрочку выполнения некоторой функции на определенное время.
 
 
setTimeout (function(){}, 5000); - внутренняя функция будет выполнена через 5 секунд
 
Если setInterval повторяется постоянно, то setTimeout выполняется только один раз. 
 
 
Пример:
 
 
setTimeout (function(){
alert('прошло 5 секунд');
}, 5000);
 
Здесь, спустя 5 секунд после загрузки страницы,  появится модальное окошко с надписью "прошло 5 секунд".
 
 
При работе с setInterval, бывает полезно уметь прерывать постоянное повторение нашего действия. Например, у вас на страничке происходит какая-то анимация, которую требуется остановить при нажатии на кпонку "Stop". Для этого нам нужно знать такую штуку, как  clearInterval и айди нашего метода setInterval. 
 
 
clearInterval ();
 
Задав методу ID, мы сможем в нужный момент его остановить:
 
 
var MyIntervalID = setInterval(fucntion(){}, 5000);
clearInterval (MyIntervalID );
 
Теперь приведу реальный пример использования setInterval и clearInterval:
 
 
<script>
$(function(){
function MainSlider(p){
$('.slider_switch ul li').removeClass('active');
$('.slider_switch ul li').eq(p).addClass('active');
$('.slider_photo .slider_photo_item').fadeOut(0);
$('.slider_photo .slider_photo_item').eq(p).fadeIn(800);
$('.slider_right_items .slider_right_item').fadeOut(0);
$('.slider_right_items .slider_right_item').eq(p).fadeIn(10);
}
 
function SliderAuto (){
var c;
var c2;
var b = $('.slider_switch ul li').size();
for(i=0;i<b-1;i++) {
if($('.slider_switch ul li').eq(i).hasClass('active')) {
c2 = c+1;
}
}
if ($('.slider_switch ul li').eq(b-1).hasClass('active')) {
c2 = 0;
}
MainSlider(c2);
}
 
$(document).ready(function(){
$('.slider_photo').css('height', '330px').css('overflow','hidden');
var i;
i=0;
var SliderInterval = new Array;
SliderInterval[i] = setInterval(SliderAuto,5000);
$('.slider_switch ul li').click(function(){
var n = $(this).index();
MainSlider(n);
clearInterval(SliderInterval[i]);
i=i+1;
SliderInterval[i] = setInterval(SliderAuto,5000);
});
});
});
</script> 
 
 
Это все тот же слайдер. У него есть переключатели по слайдам и автопереключение каждые 5 сек.
Функция MainSlider(p) скрывает все слайды и показывает слайд с индексом p, то есть p-тый по счету.
Функция SliderAuto () определяет какой слайд отображается в данный момент и, используя функцию MainSlider, скрывает данный, отображает следующий.
Вначале мы описали нужные функции, а потом начинаем их использовать при загрузке страницы.   
 
 
var i;
i=0;
var SliderInterval = new Array;
SliderInterval[i] = setInterval(SliderAuto,5000);
 
 
Переменная i будет счетчиком. SliderInterval - массив айдишников для setInterval, который в свою очередь повторяет функцию SliderAuto. Функция будет повторяться та же, будут меняться только айди интервала. Это нужно для того, чтобы при клике на переключатель, отсчет времени начинался заново. То есть, если на 4-ой секунде интервала пользователь кликнет на переключатель, то смена слайда не произойдет на пятой секунде, а через пять секунд.
 
 
$('.slider_switch ul li').click(function(){
var n = $(this).index();
MainSlider(n);
clearInterval(SliderInterval[i]);
i=i+1;
SliderInterval[i] = setInterval(SliderAuto,5000);
});
 
 
При клике на один из переключателей, мы определяем его порядкой номер, для него запускаем функцию MainSlider, останавливаем i-тый интервал и зпускаем i+1-вый.
 
 

Additional Info

Комментарии  

 
0 #12 Цифровой 20.09.2017 12:35
В последнем абзаце ошибка. Порядковвый номер, а не порядкой
 
 
-2 #11 проект ГАРДАРИЯ 06.04.2017 12:41
Вас приглашает присоединиться к дополнительному заработку Администрация проекта 'QIWI.GARDARIA'!

ПРОЕКТ 'ГАРДАРИЯ' ЭТО:
Немедленная прибыль!
Свободный график!
Неограниченный доход!
Удобный вывод!

Мы научим тебя зарабатывать по 240 руб в минуту!

ОЧЕНЬ ВЫСОКИЙ ПРОЦЕНТ ДОХОДНОСТИ!

http://qiwi.gardaria.ru
 
 
0 #10 QSN.BY 05.04.2017 16:00
Отличная статья ;-)
 
 
-1 #9 codebra 20.12.2015 14:52
Онлайн-курсы по HTML, CSS, JavaScript, jQuery
codebra.ru
 
 
-1 #8 codebra 19.11.2015 09:46
Онлайн-курсы по HTML, CSS, JavaScript, jQuery на codebra.ru
 
 
-1 #7 codebra 19.11.2015 09:45
Онлайн-курсы по HTML, CSS, JavaScript, jQuery на http://codebra.ru
 
 
+1 #6 kat-khmara 07.08.2014 11:19
Согласна, убрала))

Спасибо!
 
 
+4 #5 Mike Artemev 05.08.2014 13:19
"методы jQuery - setInterval и setTimeout"
что Что ЧТОО??? методы JQUERY???
 
 
+1 #4 Ганс 20.11.2013 15:16
сайт в закладки!Спасиб о!!!! :D
 
 
+2 #3 Ганс 20.11.2013 15:15
сайт в закладки!Спасиб о!!
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов