Як встановити затримку часу в javascript
У мене є цей шматок js на моєму веб-сайті для перемикання зображень, але мені потрібна затримка, коли ви натискаєте на зображення вдруге. Затримка повинна становити 1000 мс. Таким чином, ви натискаєте img.jpg, а потім з'являється img_onclick.jpg. Потім ви натискаєте на зображення img_onclick.jpg, після чого повинна бути затримка в 1000 мс, перш ніж знову з'явиться зображення img.jpg.
Ось код:
jQuery(document).ready(function($) {
$(".toggle-container").hide();
$(".trigger").toggle(function () {
$(this).addClass("active");
$(".trigger").find('img').prop('src', 'http://localhost:8888/images/img_onclick.jpg');
}, function () {
$(this).removeClass("active");
$(".trigger").find('img').prop('src', 'http://localhost:8888/images/img.jpg');
});
$(".trigger").click(function () {
$(this).next(".toggle-container").slideToggle();
});
});
Використовуйте setTimeout():
var delayInMilliseconds = 1000; //1 second
setTimeout(function() {
//your code to be executed after 1 second
}, delayInMilliseconds);Якщо ви хочете зробити це без setTimeout: Зверніться до цього питання.
setTimeout(function(){
}, 500); Помістіть свій код всередину { }.
500 = 0.5 секунди
2200 = 2.2 секунди
і т.д.
Існує два (найбільш вживаних) типи функцій таймерів в javascript setTimeout та setInterval (інше)
Обидва ці методи мають однакову сигнатуру. Вони приймають функцію зворотного виклику і час затримки в якості параметра.
setTimeout виконується тільки один раз після затримки, в той час як setInterval продовжує викликати функцію зворотного виклику через кожні мілісекунди затримки.
Обидва ці методи повертають цілочисельний ідентифікатор, який може бути використаний для їх очищення до закінчення таймера.
clearTimeout і clearInterval обидва ці методи приймають цілочисельний ідентифікатор, що повертається з вищевказаних функцій setTimeout і setInterval.
**Приклад
alert("before setTimeout");
setTimeout(function(){
alert("I am setTimeout");
},1000); //delay is in milliseconds
alert("after setTimeout");Якщо ви запустите вищенаведений код, ви побачите, що він сповіщає про "до закінчення часу очікування ", а потім "після закінчення часу очікування ", нарешті, він сповіщає про "I am setTimeout " через 1 секунду (1000 мс).
З прикладу можна помітити, що setTimeout(...) є асинхронним, що означає, що він не чекає закінчення таймера, перш ніж перейти до наступного оператора, тобто alert("after setTimeout");.
**Приклад
alert("before setInterval"); //called first
var tid = setInterval(function(){
//called 5 times each time after one second
//before getting cleared by below timeout.
alert("I am setInterval");
},1000); //delay is in milliseconds
alert("after setInterval"); //called second
setTimeout(function(){
clearInterval(tid); //clear above interval after 5 seconds
},5000);Якщо ви запустите вищенаведений код, ви побачите, що він сповіщає before setInterval, а потім after setInterval, нарешті, він сповіщає I am setInterval 5 разів через 1 секунду (1000 мс), тому що setTimeout очистить таймер через 5 секунд, інакше кожну 1 секунду ви отримуватимете сповіщення I am setInterval Infinitely.
**Як це робить браузер всередині?
Поясню коротко.
Щоб зрозуміти, що це таке, потрібно знати про чергу подій в javascript. У браузері реалізована черга подій. Кожного разу, коли в js спрацьовує подія, всі ці події (такі як клік і т.д.) додаються в цю чергу. Коли браузеру нема чого виконувати, він бере події з черги і виконує їх по черзі.
Тепер, коли ви викликаєте setTimeout або setInterval, ваш зворотній виклик реєструється на таймер в браузері, і він додається в чергу подій після закінчення заданого часу, і в кінцевому підсумку javascript бере подію з черги і виконує її.
Це відбувається так, тому що движок javascript є однопоточним і може виконувати тільки одну річ одночасно. Отже, вони не можуть виконувати інший javascript і відслідковувати ваш таймер. Саме тому ці таймери реєструються в браузері (браузер не є однопоточним) і він може відстежувати таймер і додавати подію в чергу після закінчення таймера.
Те ж саме відбувається і для setInterval, тільки в цьому випадку подія додається в чергу знову і знову через заданий інтервал часу, поки вона не буде очищена або не оновиться сторінка браузера.
Примітка Параметр затримки; Параметр delay, який ви передаєте цим функціям, є мінімальною затримкою часу для виконання зворотного виклику. Це пов'язано з тим, що після закінчення таймеру браузер додає подію в чергу на виконання двигуном движком javascript, але виконання зворотного виклику залежить від вашої позиції події в черзі і так як движок однопотоковий, то він виконає всі події в черзі по черзі.
Таким чином, ваш зворотній виклик може іноді займати більше зазначеного часу затримки, особливо коли ваш інший код блокує потік і не дає йому часу обробити те, що знаходиться в черзі.
І як я вже згадував, javascript є однопотоковим. Отже, якщо ви блокуєте потік надовго.
Наприклад, такий код
while(true) { //infinite loop
}Ваш користувач може отримати повідомлення про те, що сторінка не відповідає.
