Функция js settimout и sleep в javascript

Вложенные (синхронные) события

Обычно возникающие события «становятся в очередь».

Но в тех случаях, когда событие инициируется не посетителем, а кодом, то оно, как правило, обрабатывается синхронно, то есть прямо сейчас.

Рассмотрим в качестве примера событие .

Когда посетитель фокусируется на элементе, возникает событие . Обычно оно происходит, когда посетитель кликает на поле ввода, например:

Но ту же фокусировку можно вызвать и явно, вызовом метода :

В главе Фокусировка: focus/blur мы познакомимся с этим событием подробнее, а пока – нажмите на кнопку в примере ниже.

При этом обработчик вызовет метод на текстовом поле . Код обработчика , который при этом запустится, сработает синхронно, прямо сейчас, до завершения .

При клике на кнопке в примере выше будет видно, что управление вошло в , затем перешло в , затем вышло из .

Исключение в IE

Так ведут себя все браузеры, кроме IE.

В нём событие – всегда асинхронное, так что будет сначала полностью обработан клик, а потом – фокус. В остальных – фокус вызовется посередине клика. Попробуйте кликнуть в IE и в другом браузере, чтобы увидеть разницу.

More Examples

Example

You can also refer to «named» function; Display an alert box after 3 seconds (3000 milliseconds):

var myVar;function myFunction() {  myVar = setTimeout(alertFunc, 3000);}function alertFunc() {  alert(«Hello!»);}

Example

Display a timed text:

var x = document.getElementById(«txt»);setTimeout(function(){ x.value = «2 seconds» }, 2000);setTimeout(function(){ x.value = «4 seconds» }, 4000);setTimeout(function(){ x.value = «6 seconds» }, 6000);

Example

Open a new window and close the window after three seconds (3000
milliseconds):

var myWindow = window.open(«», «», «width=200, height=100»);
myWindow.document.write(«<p>This is ‘myWindow'</p>»);setTimeout(function(){ myWindow.close() }, 3000);

Example

Using clearTimeout() to prevent the function to run:

var myVar;function myFunction() {  myVar = setTimeout(function(){ alert(«Hello») }, 3000);
}function myStopFunction() {  clearTimeout(myVar);}

Example

Count forever — but with the ability to stop the count:

function startCount()function stopCount()

Example

A clock created with timing events:

function startTime() {  var today = new Date();  var h = today.getHours();
  var m = today.getMinutes();  var s = today.getSeconds();
  // add a zero in front of numbers<10  m = checkTime(m);  s = checkTime(s);
  document.getElementById(«txt»).innerHTML = h+ «:» + m + «:» + s;  t = setTimeout(function(){ startTime() }, 500);
}function checkTime(i) {  if (i<10) {    i = «0» + i;
  }  return i;}

Example

Pass parameters to the alertFunc function (does not work in IE9 and earlier):

var myVar;function myStartFunction() {  myVar = setTimeout(alertFunc, 2000, «First param», «Second param»);}

However, if you use an anonymous function, it will work in
all browsers:

var myVar;function myStartFunction() {  myVar = setTimeout(function(){ alertFunc(«First param», «Second param»); }, 2000);
}

setTimeout

The syntax:

Parameters:

Function or a string of code to execute.
Usually, that’s a function. For historical reasons, a string of code can be passed, but that’s not recommended.

The delay before run, in milliseconds (1000 ms = 1 second), by default 0.

, …

Arguments for the function (not supported in IE9-)

For instance, this code calls after one second:

With arguments:

If the first argument is a string, then JavaScript creates a function from it.

So, this will also work:

But using strings is not recommended, use arrow functions instead of them, like this:

Pass a function, but don’t run it

Novice developers sometimes make a mistake by adding brackets after the function:

That doesn’t work, because expects a reference to a function. And here runs the function, and the result of its execution is passed to . In our case the result of is (the function returns nothing), so nothing is scheduled.

A call to returns a “timer identifier” that we can use to cancel the execution.

The syntax to cancel:

In the code below, we schedule the function and then cancel it (changed our mind). As a result, nothing happens:

As we can see from output, in a browser the timer identifier is a number. In other environments, this can be something else. For instance, Node.js returns a timer object with additional methods.

Again, there is no universal specification for these methods, so that’s fine.

For browsers, timers are described in the of HTML5 standard.

setInterval

ile aynı yazıma sahiptir:

Tüm argümanlar aynı anlama gelir. Fakat ‘a nazaran fonksiyonu sadece bir defa değil belirtilen zamanda sürekli olarak çalıştırır.

Bu zamanyalayıcı iptal etmek için kullanılmalıdır.

Aşağıdaki örnekte mesaj her iki saniyede bir gönderilecektir. 5 saniye sonunda ise durdurulur.

Popup ekranında Chrome/Opera/Safari zamanı durdurur.

IE ve Firefox tarayıcılarda ekranda olduğu sürece zamanlayıcı çalışmaya devam eder, fakat Chrome, Opera ve Safari bu zamanı durdurur.

Bundan dolayı eğer yukarıdi kodu çalıştırır ve iptal’e basmazsanız Firefox/IE’de bir sonraki durmadan gösterilir. Fakat Chrome/Opera/Safari’de kapatıldıktan sonra 2 sn sonra tekrar alert gelir.

setTimeout Example 2

The second example below does the same thing as the first, but calls a function instead when the button is clicked. The function initialises the timer which will call the show_alert function.

<script language="Javascript">

function timeout_trigger() {
    window.alert('Hello!');   
}

function timeout_init() {
    setTimeout('timeout_trigger()', 2000);
}

</script>
<input type="button" value="click me" onclick="timeout_init()" />

Note that the timeout is only triggered once, i.e. when timeout_trigger is called after 2 seconds it is not called again. To make it be continually called every two seconds you would need to add another call to setTimeout() at the end of the timeout_trigger function. This is covered in the final example of this post.

Таймеры

Последнее обновление: 1.11.2015

Для выполнения действий через определенные промежутки времени в объекте window предусмотрены функции таймеров. Есть два типа таймеров:
одни выполняются только один раз, а другие постоянно через промежуток времени.

Функция setTimeout

Для одноразового выполнения действий через промежуток времени предназначена функция setTimeout(). Она может принимать два параметра:

var timerId = setTimeout(someFunction, period)

Параметр указывает на промежуток, через который будет выполняться функция из параметра . А в качестве результата функция возвращает id таймера.

function timerFunction() {
	document.write("выполнение функции setTimeout");
}
setTimeout(timerFunction, 3000);

В данном случае через 3 секунды после загрузки страницы произойдет срабатывание функции .

Для остановки таймера применяется функция clearTimeout().

function timerFunction() {
	document.write("выполнение функции setTimeout");
}
var timerId = setTimeout(timerFunction, 3000);
clearTimeout(timerId);

Функция setInterval

Функции setInterval() и clearInterval() работают аналогично функциям
и с той лишь разницей, что setInterval() постоянно выполняет
определенную функцию через промежуток времени.

Например, напишем небольшую программу для вывода текущего времени:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
<div id="time"></div>
<script>
function updateTime() {
	document.getElementById("time").innerHTML = new Date().toTimeString();
}
setInterval(updateTime, 1000);
</script>
</body>
</html>

Здесь через каждую секунду (1000 миллисекунд) вызывается функция , которая обновляет содержимое поля
, устанавливая в качестве его кода html текущее вемя.

requestAnimationFrame()

Метод requestAnimationFrame() действует аналогично за тем исключением,
что он больше заточен под анимации, работу с графикой и имеет ряд оптимизаций, которые улучшают его производительность.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<style>
	#rect {
		margin: 100px;
		width: 100px;
		height: 100px;
		background: #50c878;
	}
	</style>
</head>
<body>
<div id="rect"></div>
<script>
var square = document.getElementById("rect");
var angle = 0;
function rotate() {
	angle = (angle + 2)%360;
	square.style.transform = "rotate(" + angle + "deg)";
	window.requestAnimationFrame(rotate);
}
var id = window.requestAnimationFrame(rotate);
</script>
</body>
</html>

В метод передается функция, которая будет вызываться определенное количество раз (обычно 60) в секунду.
В данном случае в этот метод передается функция rotate, которая изменяет угол поворота блока на странице и затем обращается опять же к методу
.

В качестве возвращаемого результата метод возвращает уникальный id, который может потом использоваться для
остановки анимации:

window.cancelAnimationFrame(id);

НазадВперед

Рекурсивный setTimeout

Есть два способа запускать что-то регулярно.

Один из них . Другим является рекурсивный . Например:

Метод выше планирует следующий вызов прямо после окончания текущего .

Рекурсивный – более гибкий метод, чем . С его помощью последующий вызов может быть задан по-разному в зависимости от результатов предыдущего.

Например, необходимо написать сервис, который отправляет запрос для получения данных на сервер каждые 5 секунд, но если сервер перегружен, то необходимо увеличить интервал запросов до 10, 20, 40 секунд…
Вот псевдокод:

А если функции, которые мы планируем, ресурсоёмкие и требуют времени, то мы можем измерить время, затраченное на выполнение, и спланировать следующий вызов раньше или позже.

Рекурсивный позволяет задать задержку между выполнениями более точно, чем .

Сравним два фрагмента кода. Первый использует :

Второй использует рекурсивный :

Для внутренний планировщик будет выполнять каждые 100 мс:

Обратили внимание?

Реальная задержка между вызовами с помощью меньше, чем указано в коде!

Это нормально, потому что время, затраченное на выполнение , использует часть заданного интервала времени.

Вполне возможно, что выполнение будет дольше, чем мы ожидали, и займёт более 100 мс.

В данном случае движок ждёт окончания выполнения и затем проверяет планировщик и, если время истекло, немедленно запускает его снова.

В крайнем случае, если функция всегда выполняется дольше, чем задержка , то вызовы будут выполняться без задержек вообще.

Ниже представлено изображение, показывающее процесс работы рекурсивного :

Рекурсивный гарантирует фиксированную задержку (здесь 100 мс).

Это потому, что новый вызов планируется в конце предыдущего.

Сборка мусора и колбэк setTimeout/setInterval

Когда функция передаётся в , на неё создаётся внутренняя ссылка и сохраняется в планировщике. Это предотвращает попадание функции в сборщик мусора, даже если на неё нет других ссылок.

Для функция остаётся в памяти до тех пор, пока не будет вызван .

Есть и побочный эффект. Функция ссылается на внешнее лексическое окружение, поэтому пока она существует, внешние переменные существуют тоже. Они могут занимать больше памяти, чем сама функция. Поэтому, если регулярный вызов функции больше не нужен, то лучше отменить его, даже если функция очень маленькая.

Özet

• ve metodları ‘ın düzenli olarak ms aralıklar ile çalışmasını sağlar.
• Çalışmayı durdurmak için fonksiyonları metodundan dönen değerler ile çağırılmalıdır.
• İç içe çağrısı kullanmak ‘e göre daha esnektir. Ayrıca bu şekilde aralarda en kısa süre beklemesini sağlar.
• 0 gecikmeli zamanlayıcı ise zamanlayıcıyı olabildiğince çabuk fakat o anki koddan sonra çağırılacak şekilde zamanlar.

‘ın bazı kullanım durumları:

• CPU-aç görevleri parçalara ayırmak için, böylece kod sürekli tepki verebilir.
• Böylece görev devam ederken tarayıcının başka işlere ( ilerleme çubuğu ) zaman ayırır.

Tüm zamanlama metodları tam olarak gecikmeyi garantilemez. Zamanlayıcıda bu varsayımın üzerine birşey inşa etmeyin.

Örneğin, tarayıcı zamanı birçok nedenden ötürü yavaşlayabilir:

• İşlemcinin yükü artarsa.
• Tarayıcının tab’ı arka plana alındıysa.
• Laptop batarya ile çalışıyorsa.

Bunların hepsi tarayıcı zamanına etki eder. Aralardaki gecikme 300ms ile 1000ms arasında değişebilir. Tabi tarayıcı ve özellikleri de bu konuda etkin rol oynar.

More Examples

Example

You can also refer to a «named» function; Alert «Hello» every 3 seconds (3000 milliseconds):

var myVar;function myFunction() {  myVar = setInterval(alertFunc, 3000);}function alertFunc() {  alert(«Hello!»);}

Example

Display the current time (the setInterval() method will execute the function
once every 1 second, just like a digital watch):

var myVar = setInterval(myTimer, 1000);function myTimer()
{  var d = new Date();  var t = d.toLocaleTimeString();
 
document.getElementById(«demo»).innerHTML = t;}

Example

Using clearInterval() to stop time in the previous example:

var myVar = setInterval(myTimer, 1000);function myTimer()
{  var d = new Date();  var t = d.toLocaleTimeString();
  document.getElementById(«demo»).innerHTML = t;}function myStopFunction()
{  clearInterval(myVar);}

Example

Using setInterval() and clearInterval() to create a dynamic progress bar:

function move() {  var elem = document.getElementById(«myBar»);   var width = 0;  var id = setInterval(frame, 10);  function frame() {    if (width == 100) {      clearInterval(id);    } else {      width++;       elem.style.width = width + ‘%’;
    }  }}

Example

Toggle between two background colors once every 300 milliseconds:

var myVar = setInterval(setColor, 300);function setColor() {  var x = document.body;  x.style.backgroundColor = x.style.backgroundColor == «yellow» ? «pink» : «yellow»;}
function stopColor() {  clearInterval(myVar);}

Example

Pass parameters to the alertFunc function (does not work in IE9 and earlier):

var myVar;function myStartFunction() {  myVar = setInterval(alertFunc, 2000, «First param», «Second param»);}

However, if you use an anonymous function, it will work in
all browsers:

var myVar;function myStartFunction() {  myVar = setInterval(function(){ alertFunc(«First param», «Second param»); }, 2000);
}

중첩 setTimeout

무언가를 일정 간격을 두고 실행하는 방법에는 크게 2가지가 있습니다.

하나는 을 이용하는 방법이고, 다른 하나는 아래 예시와 같이 중첩 을 이용하는 방법입니다.

다섯 번째 줄의 은 로 표시한 줄의 실행이 종료되면 다음 호출을 스케줄링합니다.

중첩 을 이용하는 방법은 을 사용하는 방법보다 유연합니다. 호출 결과에 따라 다음 호출을 원하는 방식으로 조정해 스케줄링 할 수 있기 때문입니다.

5초 간격으로 서버에 요청을 보내 데이터를 얻는다고 가정해 봅시다. 서버가 과부하 상태라면 요청 간격을 10초, 20초, 40초 등으로 증가시켜주는 게 좋을 겁니다.

아래는 이를 구현한 의사 코드입니다.

CPU 소모가 많은 작업을 주기적으로 실행하는 경우에도 을 재귀 실행하는 방법이 유용합니다. 작업에 걸리는 시간에 따라 다음 작업을 유동적으로 계획할 수 있기 때문입니다.

중첩 을 이용하는 방법은 지연 간격을 보장하지만 은 이를 보장하지 않습니다.

아래 두 예시를 비교해 봅시다. 첫 번째 예시에선 을 이용했습니다.

두 번째 예시에선 중첩 을 이용했습니다.

첫 번째 예시에선, 내부 스케줄러가 를 100밀리초마다 실행합니다.

그림을 보고 뭔가 알아차리셨나요?

을 사용하면 호출 사이의 지연 간격이 실제 명시한 간격(100ms)보다 짧아집니다!

이는 을 실행하는 데 ‘소모되는’ 시간도 지연 간격에 포함시키기 때문입니다. 지극히 정상적인 동작이죠.

그렇다면 을 실행하는 데 걸리는 시간이 명시한 지연 간격보다 길 때 어떤 일이 발생할까요?

이런 경우는 엔진이 의 실행이 종료될 때까지 기다려줍니다. 의 실행이 종료되면 엔진은 스케줄러를 확인하고, 지연 시간이 지났으면 다음 호출을 바로 시작합니다.

따라서 함수 호출에 걸리는 시간이 매번 밀리초보다 길면, 모든 함수가 쉼 없이 계속 연속 호출됩니다.

한편, 중첩 을 이용하면 다음과 같이 실행 흐름이 이어집니다.

중첩 을 사용하면 명시한 지연(여기서는 100ms)이 보장됩니다.

이렇게 지연 간격이 보장되는 이유는 이전 함수의 실행이 종료된 이후에 다음 함수 호출에 대한 계획이 세워지기 때문입니다.

가비지 컬렉션과 setInterval·setTimeout

이나 에 함수를 넘기면, 함수에 대한 내부 참조가 새롭게 만들어지고 이 참조 정보는 스케줄러에 저장됩니다. 따라서 해당 함수를 참조하는 것이 없어도 과 에 넘긴 함수는 가비지 컬렉션의 대상이 되지 않습니다.

의 경우는, 이 호출되기 전까지 함수에 대한 참조가 메모리에 유지됩니다.

그런데 이런 동작 방식에는 부작용이 하나 있습니다. 외부 렉시컬 환경을 참조하는 함수가 있다고 가정해 봅시다. 이 함수가 메모리에 남아있는 동안엔 외부 변수 역시 메모리에 남아있기 마련입니다. 그런데 이렇게 되면 실제 함수가 차지했어야 하는 공간보다 더 많은 메모리 공간이 사용됩니다. 이런 부작용을 방지하고 싶다면 스케줄링할 필요가 없어진 함수는 아무리 작더라도 취소하도록 합시다.

setTimeout

Yazımı:

Parametreler:

Fonksiyon veya çalıştırılacak kodun karakter dizisi hali. Genelde bu fonksiyon olur. Uyumluluk dolayısıyla karakter dizisi de gönderilebilir fakat önerilmez.

Milisaniye cinsiden çalışmadan önceki bekleme süresi.(1000 ms = 1 saniye).

, …

Fonksiyon için gerekli argümanlar.( IE9 öncesinde çalışmaz.)

Örneğin aşağıdaki kod fonksiyonunu bir saniye sonra çalıştırır:

Argümanlı versiyonu:

Eğer ilk argüman karakter dizisi ise, sonrasında JavaScript bundan fonksiyon üretir.

Aşağıdaki de aynı şekilde çalışacaktır:

Karakter dizisi olarak fonksiyon göndermek aslında pek önerilmez, bunun yerine aşağıdaki gibi fonksiyon kullanılması daha doğrudur:

Fonksiyon gönder fakat çalıştırma.

Yeni başlayan arkadaşlar bazen yanlışlıkla fonksiyonun sonuna ekleyebilir:

Bu çalışmaz, çünkü referans bir fonksiyon beklemektedir. Burada derseniz fonksiyonu çalıştırırsınız ve bunun sonucu fonksiyonu tarafından kullanılır. Bizim durumumuzda döndürür. ( fonksiyon ile alakalı bir sorun yok ) bundan dolayı hiç birşey zamanlanmaz.

çağrısı “timer identifier” döner. Bu ile zamanlayıcıyı iptal edebiliriz.

Yazımı aşağıdaki gibidir:

Aşağıdaki kodda önce bir zamanlayıcı test eder sonrasında ise bunu iptal eder. Sonuç olarak hiçbir şey olmaz:

çıktısından da göreceğiniz gibi timer bir id numarası ile tanımlanır. Diğer ortamlarda bu başka birşey olabilir. Örneğin Node.Js bir sayı yerine farklı metodları olan timer objesi döner.

Tekrar söylemek gerekirse üzerinde anlaşılmış bir şartname bulunmamaktadır.

Tarayıcılar için zamanlayıcılar belirtilmiştir.

Passing Parameters to setTimeout

In a basic scenario, the preferred, cross-browser way to pass parameters to a callback executed by is by using an anonymous function as the first argument.

In the following example, we select a random animal from an array and pass this random animal as a parameter to a function. The function is then executed by with a delay of one second:

Note: I’ve used a regular function () to return a random element from an array. It would also be possible to write this as a function expression using an arrow function:

We’ll get to arrow functions in the next section.

An Alternative Method

As can be seen from the , there’s a second method of passing parameters to a callback executed by . This involves listing any parameters after the delay.

With reference to our previous example, this would give us:

Unfortunately, this doesn’t work in IE9 or below, where the parameters come through as . If you’re in the unenviable position of having to support IE9, there is .

setTimeout and clearTimeout Example

setTimeout returns a value which stores a reference to the timer. The timer can then be cleared using the clearTimeout function. This is done in the following example:

<script language="Javascript">

var timeout;

function timeout_trigger() {
    document.getElementById('timeout_text').innerHTML = 'The timeout has been triggered';
}

function timeout_clear() {
    clearTimeout(timeout);
    document.getElementById('timeout_text').innerHTML = 'The timeout has been cleared';
}

function timeout_init() {
    timeout = setTimeout('timeout_trigger()', 3000);
    document.getElementById('timeout_text').innerHTML = 'The timeout has been started';
}

</script>

<div>
    <input type="button" value="test timeout" onclick="timeout_init()" />
    <input type="button" value="clear timeout" onclick="timeout_clear()" />
</div>
<div id="timeout_text"></div>

When timeout_init() is called, the timeout reference is stored in the «timeout» variable. The name of the variable can be whatever you want, but it needs to be in the global scope, hence the «var timeout;» declaration at the start of the code.

Clicking the «test timeout» button starts the timer and the «clear timeout» button clears the timeout at the end. Here it is in action. Again, if you reading this post in a feed reader you may need to click through to the actual post to see this working.

function timeout_trigger() {
document.getElementById(‘timeout_text’).innerHTML = ‘The timeout has been triggered‘;
}

function timeout_clear() {
clearTimeout(timeout);
document.getElementById(‘timeout_text’).innerHTML = ‘The timeout has been cleared‘;
}

function timeout_init() {
timeout = setTimeout(‘timeout_trigger()’, 3000);
document.getElementById(‘timeout_text’).innerHTML = ‘The timeout has been started‘;
}

Placeholding text

Nested setTimeout

There are two ways of running something regularly.

One is . The other one is a nested , like this:

The above schedules the next call right at the end of the current one .

The nested is a more flexible method than . This way the next call may be scheduled differently, depending on the results of the current one.

For instance, we need to write a service that sends a request to the server every 5 seconds asking for data, but in case the server is overloaded, it should increase the interval to 10, 20, 40 seconds…

Here’s the pseudocode:

And if the functions that we’re scheduling are CPU-hungry, then we can measure the time taken by the execution and plan the next call sooner or later.

Nested allows to set the delay between the executions more precisely than .

Let’s compare two code fragments. The first one uses :

The second one uses nested :

For the internal scheduler will run every 100ms:

Did you notice?

The real delay between calls for is less than in the code!

That’s normal, because the time taken by ‘s execution “consumes” a part of the interval.

It is possible that ‘s execution turns out to be longer than we expected and takes more than 100ms.

In this case the engine waits for to complete, then checks the scheduler and if the time is up, runs it again immediately.

In the edge case, if the function always executes longer than ms, then the calls will happen without a pause at all.

And here is the picture for the nested :

The nested guarantees the fixed delay (here 100ms).

That’s because a new call is planned at the end of the previous one.

Garbage collection and setInterval/setTimeout callback

When a function is passed in , an internal reference is created to it and saved in the scheduler. It prevents the function from being garbage collected, even if there are no other references to it.

For the function stays in memory until is called.

There’s a side-effect. A function references the outer lexical environment, so, while it lives, outer variables live too. They may take much more memory than the function itself. So when we don’t need the scheduled function anymore, it’s better to cancel it, even if it’s very small.

Управление временным континуумом с Node.js

API Node.js предоставляет несколько способов планирования кода, который нужно
выполнить, в какой-то момент в будущем. Приведенные ниже функции могут показатья знакомыми, так как
они доступны в большинстве браузеров, но Node.js на самом деле предоставляет
свою реализацию этих методов. Таймеры очень тесно интегрируются с системой, и, несмотря на то,
что API Node.js отражает API браузера, все равно имеются некоторые различия в реализации.

«Когда я скажу» Выполнение ~

может использоваться для планирования выполнения кода после назначенного
количества миллисекунд. Эта функция аналогична из JavaScript API браузера, однако строка кода не может передаваться
в качестве аргумента для выполнения.

первым параметром принимает функцию, которую нужно выполнить, и задержку в миллисекундах,
как число, в качестве второго параметра. Также можно перечислить дополнительные аргументы и они
будут переданы функции. Вот пример этого:

Функция выполнится через время, максимально приближенное к
1500 миллисекундам (или 1.5 секунды), из-за вызова .

Нельзя полагаться на то, что тайм-аут выполнится после этого точного количества миллисекунд.
Это связано с тем, что другой исполняемый код, который блокирует или удерживает цикл событий,
отодвигает выполнение тайм-аута на задний план. Единственной гарантией является то, что
тайм-аут не будет выполнен раньше, чем заданный интервал.

возвращает объект , который можно использовать в качестве ссылки
на тайм-аут, который был установлен. Этот объект можно использовать для отмены тайм-аута (см. ниже), а также для изменения поведения при выполнении (см. ниже).

«Сразу после этого» Выполнение ~

выполнит код в конце текущего цикла событий.
Этот код будет выполняться после любых операций ввода-вывода в текущем цикле событий и
перед любым запланированными таймерами для следующего цикла событий. Такое выполнение кода
можно рассматривать как «сразу после этого», то есть любой код, следующий за вызовом
функции , будет выполняться до аргумента функции .

Первым аргументом будет функция, которую нужно выполнить. Все последующие
аргументы будут переданы функции при ее выполнении. Вот пример:

Функция, переданная в , будет выполнена после того,
как будет выполнен весь исполняемый код, и в консоли мы увидим следующее:

возвращает объект , который можно использовать для отмены
запланированного immediate (см. ниже).

Примечание: Не путайте и . Между ними есть
несколько основных различий. Во-первых, выполнится перед любыми ,
а также перед любыми запланированными операциями ввода/вывода. Во-вторых, не подлежит
отмене, имеется в виду, что после того как вы запланировали выполнение кода с помощью ,
то его выполнение не может быть приостановлено, также как и с обычной функцией. Обратитесь к
, чтобы лучше понять
работу .

«Бесконечный цикл» Выполнение ~

Если у вас есть код, который нужно выполнить несколько раз, то можно использовать
для этого . принимает параметром функцию, которая будет
выполняться бесконечное количество раз с заданным интервалом в миллисекундах, сам интервал передается
вторым параметром. Как и в случае с можно передавать дополнительные аргументы,
эти аргументы будут переданы функции при вызове. Также как и с , задержка не может
быть гарантирована из-за операций, которые могут удерживать цикл событий, следовательно, нужно
рассматривать эту задержку как приблизительную. Смотрите пример ниже:

В примере выше будет выполняться каждые 1500 миллисекунд
или 1.5 секунд, до тех пор, пока ее не остановят (см. ниже).

, также как и возвращает объект , который
можно использовать в качестве ссылки для изменения установленного интервала.

Syntax

From the MDN documentation, the syntax for is as follows:

where:

• is a numerical ID, which can be used in conjunction with clearTimeout to cancel the timer.
• refers to the Window interface or the WorkerGlobalScope interface.
• is the function to be executed after the timer expires.
• is an alternative syntax that allows you to include a string instead of a function, which is compiled and executed when the timer expires.
• is the number of milliseconds by which the function call should be delayed. If omitted, this defaults to 0.
• are additional arguments passed to the function specified by .

Note: the square brackets denote optional parameters.

setTimeout vs window.setTimeout

You’ll notice that the syntax above uses . Why is this?

Well, when running code in the browser, would refer to the global object. Both and refer to the same function, the only difference being that in the second statement we are referencing the method as a property of the object.

In my opinion, this adds complexity for little or no benefit. If you’ve defined an alternative method which would be found and returned in priority in the scope chain, then you’ve probably got bigger problems to worry about.

For the purposes of this tutorial, I’ll omit , but ultimately, which syntax you choose is up to you.