Є два (в основному використовувані) типи функції таймера в JavaScript setTimeoutта setInterval( інше )
Обидва ці методи мають однаковий підпис. Вони приймають функцію зворотного дзвінка і час затримки як параметр.
setTimeoutвиконується лише один раз після затримки, тоді як setIntervalпродовжує викликати функцію зворотного виклику після кожної мілісекунди затримки.
обидва ці способи повертають цілочисельний ідентифікатор, який можна використовувати для очищення їх до закінчення терміну дії таймера.
clearTimeoutі clearIntervalобидва ці способи приймають цілий ідентифікатор, повернутий з вищезгаданих функцій setTimeoutіsetInterval
Приклад:
setTimeout
alert("before setTimeout");
setTimeout(function(){
alert("I am setTimeout");
},1000); //delay is in milliseconds
alert("after setTimeout");
Якщо запустити наведений вище код, ви побачите, що він оповіщає, before setTimeoutа потім, after setTimeoutнарешті, попереджає I am setTimeoutчерез 1сек (1000 мс)
Що ви можете помітити з прикладу, це те, що setTimeout(...)асинхронний, що означає, що він не чекає, коли таймер закінчиться, перш ніж перейти до наступного оператора, тобтоalert("after setTimeout");
Приклад:
setInterval
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 мс), оскільки встановлене тайм-аут очистить таймер через 5 секунд, або ж кожні 1 секунду ви отримаєте попередження I am setIntervalнескінченно.
Як це робить браузер внутрішньо?
Я поясню коротко.
Щоб зрозуміти, що ви повинні знати про чергу подій у javascript. У браузері реалізована черга подій. Щоразу, коли подія запускається у js, усі ці події (наприклад, клацання тощо) додаються до цієї черги. Коли у вашому браузері немає нічого для виконання, він бере подію з черги та виконує їх по черзі.
Тепер, коли ви зателефонували setTimeoutабо setIntervalваш зворотний дзвінок реєструється в таймері в браузері, і він додається до черги подій після закінчення зазначеного часу, і в кінцевому підсумку javascript знімає подію з черги та виконує її.
Це трапляється так, тому що двигун javascript є однопоточним і вони можуть виконувати лише одне. Таким чином, вони не можуть виконувати інші javascript і слідкувати за вашим таймером. Ось чому ці таймери зареєстровані в браузері (браузер не є однопоточним), і він може відслідковувати таймер і додавати події в чергу після закінчення таймера.
те саме відбувається setIntervalлише в цьому випадку, подія додається до черги знову і знову через вказаний інтервал, поки не буде очищено або оновлена сторінка браузера.
Примітка
Параметр затримки, який ви передаєте цим функціям, - це мінімальний час затримки для виконання зворотного дзвінка. Це тому, що після закінчення таймера браузер додає подію до черги, яку повинен виконувати механізм javascript, але виконання зворотного виклику залежить від вашої позиції подій у черзі, і оскільки двигун є однопоточним, він виконуватиме всі події в черга одна за одною.
Отже, зворотний виклик може колись зайняти більше, ніж зазначений час затримки, щоб викликати спеціально, коли ваш інший код блокує потік і не дає йому часу обробляти те, що є в черзі.
І як я вже згадував, JavaScript - це один потік Отже, якщо ви блокуєте нитку надовго.
Як і цей код
while(true) { //infinite loop
}
Ваш користувач може отримати повідомлення про те, що сторінка з повідомленням не відповідає .
setTimeout(function(){/*YourCode*/},1000);