Временные события JavaScript

Временные события

Объект window позволяет выполнять код через заданные интервалы времени.

Эти временные интервалы называются временными событиями.

Два ключевых метода, которые можно использовать с JavaScript:

setTimeout(function, миллисекунды)
Выполняет функцию после ожидания указанного количества миллисекунд.
setInterval(функция, миллисекунды)
То же, что и setTimeout(), но повторяет выполнение функции непрерывно.

setTimeout() и setInterval() являются методами объекта HTML DOM Window.

Метод setTimeout()

window.setTimeout(function, milliseconds);

Метод window.setTimeout() можно написать без префикса окна.

Первый параметр — это функция, которую необходимо выполнить.

Второй параметр указывает количество миллисекунд до выполнения.

Пример

Нажмите кнопку. Подождите 3 секунды, и на странице появится предупреждение «Привет»:

<button onclick="setTimeout(myFunction, 3000)">Try it</button>

    <script>
function myFunction() {
  alert('Hello');
    }
</script>

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>Click "Try it". Wait 3 seconds, and the page will alert "Hello".</p>

<button onclick="setTimeout(myFunction, 3000);">Try it</button>

<script>
function myFunction() {
  alert('Hello');
}
</script>

</body>
</html>

Как остановить казнь?

Метод clearTimeout() останавливает выполнение функции. указанный в setTimeout().

window.clearTimeout(timeoutVariable)

Метод window.clearTimeout() можно написать без префикса окна.

Метод clearTimeout() использует переменную возвращается из setTimeout():

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

Если функция еще не была выполнена, вы можете остановить ее выполнение, вызвав clearTimeout() метод:

Пример

Тот же пример, что и выше, но с добавленной кнопкой «Стоп»:

<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>Click "Try it". Wait 3 seconds. The page will alert "Hello".</p>
<p>Click "Stop" to prevent the first function to execute.</p>
<p>(You must click "Stop" before the 3 seconds are up.)</p>

<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>

<button onclick="clearTimeout(myVar)">Stop it</button>

<script>
function myFunction() {
  alert("Hello");
}
</script>
</body>
</html>

Метод setInterval()

Метод setInterval() повторяет заданную функцию каждый раз. временной интервал.

window.setInterval(function, milliseconds);

Метод window.setInterval() можно написать без префикса окна.

Первый параметр — это функция, которую необходимо выполнить.

Второй параметр указывает длину временного интервала между каждым исполнение.

В этом примере функция под названием «myTimer» выполняется раз в секунду (как цифровой смотреть).

Пример

Отображение текущего времени:

setInterval(myTimer, 1000);
 
function myTimer() {
  const d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>A script on this page starts this clock:</p>

<p id="demo"></p>

<script>
setInterval(myTimer, 1000);

function myTimer() {
  const d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

</body>
</html>

В одной секунде 1000 миллисекунд.

Как остановить казнь?

Метод clearInterval() останавливает выполнение функции. указанный в методе setInterval().

window.clearInterval(timerVariable)

Метод window.clearInterval() можно написать без префикса окна.

Метод clearInterval() использует переменную, возвращаемую из setInterval():

let myVar = setInterval(function, milliseconds);
clearInterval(myVar);

Пример

Тот же пример, что и выше, но мы добавили кнопку «Остановить время»:

<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>

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>A script on this page starts this clock:</p>

<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>

</body>
</html>

Больше примеров

Еще один простой тайминг

<!DOCTYPE html>
<html>
<body>

<h2>JavaSript setTimeout()</h2>

<p id="demo">I will display when two, four, and six seconds have passed.</p>

<script>
setTimeout(myTimeout1, 2000) 
setTimeout(myTimeout2, 4000) 
setTimeout(myTimeout3, 6000) 

function myTimeout1() {
  document.getElementById("demo").innerHTML = "2 seconds";
}
function myTimeout2() {
  document.getElementById("demo").innerHTML = "4 seconds";
}
function myTimeout3() {
  document.getElementById("demo").innerHTML = "6 seconds";
}
</script>

</body>
</html>

Часы, созданные с помощью события синхронизации

<!DOCTYPE html>
<html>

<body onload="startTime()">

<h2>JavaScript Clock</h2>

<div id="txt"></div>

<script>
function startTime() {
  const today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  let s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt').innerHTML =  h + ":" + m + ":" + s;
  setTimeout(startTime, 1000);
}

function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  return i;
}
</script>

</body>
</html>

Временные события JavaScript

Оглавление