JavaScript Таймінг (час) подій
|
1
2
3
4
5
6
7
8
9
10
11
12
|
JavaScript можна виконувати в інтервалах часу. Це називається подіями синхронізації. |
Час подій
Об'єкт window дозволяє виконувати код через визначені проміжки часу.
Ці проміжки часу називаються подіями синхронізації.
Двома ключовими методами для використання з JavaScript є:
setTimeout(function, milliseconds)
Виконує функцію після очікування заданої кількості мілісекунд.setInterval(function, milliseconds)
Те саме, що setTimeout(), але безперервно повторює виконання функції.
Методи setTimeout() та setInterval() - обидва є методами об’єкта HTML DOM Window.
Метод setTimeout()
window.setTimeout(function, milliseconds);
Метод window.setTimeout() можна записати без префікса window.
Перший параметр — це функція, яку потрібно виконати.
Другий параметр вказує кількість мілісекунд перед виконанням.
Приклад
Натисніть кнопку. Зачекайте 3 секунди, і сторінка сповістить "Hello":
<button onclick="setTimeout(myFunction, 3000)">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
Спробуйте самі »
Як зупинити виконання?
Метод clearTimeout() зупиняє виконання функції, зазначеної в setTimeout().
window.clearTimeout(timeoutVariable)
Метод window.clearTimeout() можна записати без префікса window.
Метод clearTimeout() використовує змінну, повернуту із setTimeout():
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
Якщо функція ще не була виконана, ви можете зупинити виконання, викликавши метод clearTimeout():
Приклад
Той самий приклад, що й вище, але з додаванням кнопки "Stop":
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
Спробуйте самі »
Метод setInterval()
Метод setInterval() повторює певну функцію через кожний заданий інтервал часу.
window.setInterval(function, milliseconds);
Метод window.setInterval() можна записати без префікса window.
Перший параметр — це функція, яку потрібно виконати.
Другий параметр вказує довжину інтервалу часу між кожним виконанням.
У цьому прикладі виконується функція "myTimer" раз на секунду (як цифровий годинник).
Приклад
Відображення поточного часу:
setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
Спробуйте самі »
В одній секунді 1000 мілісекунд.
Як зупинити виконання?
Метод clearInterval() зупиняє виконання функції, указаної в методі setInterval().
window.clearInterval(timerVariable)
Метод window.clearInterval() можна записати без префікса window.
Метод clearInterval() використовує змінну, повернуту із setInterval():
let myVar = setInterval(function, milliseconds);
clearInterval(myVar);
Приклад
Той самий приклад, що й вище, але ми додали кнопку "Stop time" ("Зупинити час"):
<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop time</button>
<script>
let myVar = setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
Спробуйте самі »
Більше прикладів
Годинник, створений за допомогою події таймінгу.
