setInterval setTimeout Javascript примеры, анимация и как остановить?

Главная » JavaScript » setInterval setTimeout Javascript примеры, анимация и как остановить?

Жизненный цикл кода Javascript.

Содержание статьи :

Что бы понять и показать Вам как работают setTimeout и setInterval в Javascript-е и примеры с ними, нужно понимать, общую картину выполнения основного потока кода. То есть, бывает основной поток чтения и выполнения кода. И бывает параллельно выполняющийся код.

В javascript есть имитация параллельного выполнения кода. Весь код в Javascript выполняется синхронно, то есть интерпретатор js читает код как и мы читаем книгу слева на право, сверху вниз, символ за символом, строка за строкой.

Асинхронное интерпретирование кода это?

Асинхронность — это возможность выполнять два или более участка кода, параллельно с основным потоком, то есть не блокируя основной поток. Единственный способ эмулировать асинхронность, это использовать такие функции в javascript как setTimeout и setInterval. Но есть еще ajax, и у меня есть статья про него, но сейчас не об этом.

Сразу проясним что такое CallBack «колбэк» функция. CallBack функция — это функция, которая будет вызвана в будущем, когда произойдет какое-то событие, в случае с setTimeout и setInterval это тогда когда подойдет время таймера.

setTimeout что это?

setTimeout — это функция javascript, которая откладывает выполнения определенной части кода, на указанное время. Выполняется однократно.

setInterval что это?

setInterval — это функция, которая запускает выполнение части кода через указанный промежуток времени. Выполняется условно бесконечно.

setTimeout синтаксис :

Синтаксис очень прост:

/* Первым аргументом передаётся функция колбэк */
/* Вторым аргументом передаётся количество миллисекунд, через которое должна выполниться колбэк функция */
/* Третий не обязательный параметр, это значение, которое мы можем передать аргументом в колбэк функцию */
setTimeout((arg) => {
  console.log("Я колбэк функция setTimeout, выполняюсь через 1000 милисекунд." + arg);
}, 1000, " А я аргумент который может передаваться в колбэк функцию, через 1000 милисекунд.");

/* Функцию  колбэк можно вынести за пределы setTimeout и сделать например вот так */
function funcCallBack(arg) {
	console.log("Я колбэк функция setTimeout, выполняюсь через 1000 милисекунд." + arg);
}

setTimeout(funcCallBack, 1000, " А я аргумент который может передаваться в колбэк функцию, через 1000 милисекунд.");

setInterval синтаксис :

Синтаксис такой же как и у setTimeout

/* Первым аргументом передаётся функция колбэк */
/* Вторым аргументом передаётся количество миллисекунд через которое должна выполниться колбэк функция */
/* Третий не обязательный параметр, - это значение которое мы можем передать аргументом в колбэк функцию */
setInterval((arg) => {
  console.log("Я колбэк функция setInterval, выполняюсь через 1000 милисекунд." + arg);
}, 1000, " А я аргумент который может передаваться в колбэк функцию.");

/* Функцию  колбэк можно вынести за пределы setInterval и сделать например вот так */
function funcCallBack(arg) {
	console.log("Я колбэк функция setInterval, выполняюсь через 1000 милисекунд." + arg);
}

setInterval(funcCallBack, 1000, " А я аргумент который может передаваться в колбэк функцию.");

Как остановить setInterval или setTimeout?

setInterval и setTimeout, — возвращают свой идентификатор. Что бы остановить setInterval или setTimeout, нужно передать этот идентификатор соответствующим функциям.

clearTimeout( идентификатор );

clearInterval( идентификатор );

Разберем на примере:

let idSetTimeout = setTimeout((arg) => {
  console.log("Я колбэк функция setTimeout, выполняюсь через 1000 милисекунд.");
}, 1000);

// Метод для остановки setTimeout
clearTimeout(idSetTimeout);


// Тоже самое для setInterval
let idSetInterval = setInterval((arg) => {
  console.log("Я колбэк функция setInterval, выполняюсь через 1000 милисекунд.");
}, 2000);

// Метод для остановки setInterval
clearInterval(idSetInterval);

setInterval примеры анимации :

SetInterval и SetTimeout, эти инструменты дают большие возможности в анимации вашего приложения. Сделаем например вот такой простой «авто слайдер». Наши картинки будут меняться автоматически каждые 3000 миллисекунды. Все очень просто, попробуйте набрать код сами.

Код HTML

<div id="view_img"></div>

Код CSS

#view_img {
	max-width: 400px;
	height: 250px;
	background: url("https://good-code.ru/wp-content/uploads/2019/03/wordpress.png") no-repeat no-repeat center center;
	background-size: contain;
}

JavaScript код для нашего слайдера

// Массив с изображениями
let arr_img = [
"https://good-code.ru/wp-content/uploads/2019/03/wordpress.png",
"https://good-code.ru/wp-content/uploads/2019/03/kursy-po-programirovaniu-besplatno.jpg",
"https://good-code.ru/wp-content/uploads/2019/02/ajax-javascript.png",
"https://good-code.ru/wp-content/uploads/2019/02/kak-izbavitsya-ot-leni-1.jpg",
"https://good-code.ru/wp-content/uploads/2019/02/developer-3461405_1920.jpg"
];

// Счетчик для указания порядкового элемента массива
let count = 0;

// Див на странице в котором будут менять изображения
let view_img = document.getElementById("view_img");


setInterval(() => {

// Если счетчик вырос больше чем количество элементов в массиве то сбрасываем его
	if( count >= arr_img.length){
		count = 0;
	}

// Добавляем порядковый номер элемента массива
	view_img.style.background = `url("${arr_img[count]}") no-repeat no-repeat center center`;

// Делаем что бы картинку не обрезало
	view_img.style.backgroundSize = `contain`; 

// Увеличиваем счетчик на каждом срабатывании setInterval
	count++;
}, 3000);

Надеюсь Вам был понятны «setInterval setTimeout javascript примеры». Пишите если что-то у Вас setInterval или setTimeout не работает. Всегда рад помочь.
Кому вдруг что то непонятно можете тоже самое посмотреть в видео: