Javascript settimeout() function examples

setTimeout()

Эту функцию вы видели выше, а сейчас узнаете про неё ещё детальнее. Она используется в основном в тех случаях, если вы хотите запустить вашу функцию через конкретное количество миллисекунд после вызова самого . Синтаксис для этого метода такой:

setTimeout ( expression, timeout );

Тут в JavaScript коде запустится по прошествии миллисекунд, указанных в аргументе .

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

Вот ещё один пример:

<input type="button" name="sayHello" value="Wait for my Hello!"onclick="setTimeout('alert(\'Hello!\')', 4000)"/>

При нажатии на кнопку запускается метод. Выражение, запуск которого по вашему предусмотрению должен произойти с задержкой в 4000ms или 4 секунды, уже передано.

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

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

То, что выше — это простой пример со всем кодом для alert бокса в вызове. На практике же, вы будете вызывать функции внутри таймеров гораздо чаще. Следующий пример даст вам лучшее понимание о вызове функций с помощью .

Для примера, код ниже, вызывает через одну секунду:

function sayHello() {alert('Hello');}setTimeout(sayHello, 1000);

Вы можете также передавать аргументы вместе с функцией, например, как тут:

function sayHello(message, person) {alert( message + ', '+ person );}setTimeout(sayHello, 1000, "Hi", "Monica"); // Hi, Monica

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

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

setTimeout("alert('Hello')", 1000);

Но применение такого метода не рекомендуется, лучше используйте функции, как тут:

setTimeout(() => alert('Hello'), 1000);

Зачем нам вообще колбэки?

По одной простой и важной причине — JavaScript это событийно-ориентированный язык. Это говорит нам о том, что вместо ожидания ответа для последующего шага, JavaScript продолжит выполнение, следя за другими событиями (ну или ивентам, кому как удобнее)

Давайте взглянем на простой пример:

function first(){console.log(1);}function second(){console.log(2);}first();second();

Как вы и ожидали, функция выполнится первой, а функция second выполнится второй — все это выдаст в консоль следующее:

// 1// 2

Но что, если функция будет содержать код, который не может быть немедленно выполнен. Для примера, API запрос, где нам нужно отправить информацию, а затем подождать ответ? Чтобы симулировать такое действие, мы применим (дальше будет подробнее про него), который является функцией JavaScript, вызывающей другую функцию после определенного количества времени. То есть, мы задержим нашу функцию на 500 миллисекунд, чтобы симулировать API запрос. Таким образом, наш новый код будет выглядеть так:

function first(){// Симулируем задержку кодаsetTimeout( function(){console.log(1);}, 500 );}function second(){console.log(2);}first();second();

Пока что совершенно неважно, понимаете ли вы то, как работает. Всё, что важно — это то, чтобы вы увидели, что мы отсрочили на 500 миллисекунд

И так, что случится, когда мы вызовем наши функции?

first();second();// 2// 1

Пусть даже мы и вызываем первой, мы выводим в лог результат этой функции, после функции .

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

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

setTimeout и setInterval

В JavaScript имеются методы, которые позволяют вызвать функцию не сразу, а через некоторый промежуток времени (в асинхронном режиме). Называются они и .

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

Синтаксис и :

// setTimeout
window.setTimeout(func  );
// setInterval
window.setTimeout(func  );

Параметры:

• – функция, которую нужно вызвать спустя указанное в количество миллисекунд;
• – количество миллисекунд по истечении которых нужно выполнить ;
• – дополнительные аргументы, которые нужно передать в .

Например, вызовем функцию один раз по прошествии 3 секунд:

// функция
function myFunc() {
  console.log('after 3 seconds');
}

// вызовем функцию myFunc после 3 секунд
window.setTimeout(myFunc, 3000);
// выведем сообщение в консоль
console.log('immediately');

При выполнение этого кода программа не остановится на месте, где мы зарегистрировали некоторую асинхронность посредством и не будет блокировать её дальнейшее выполнение на 3 секунды, через которые нужно будет вызвать . Выполнение скрипта продолжится дальше и сначала браузер выведет в консоль сообщение «immediately», а затем через 3 секунды – «after 3 seconds».

Другими словами, когда браузер доходит до исполнения , он как бы помещает функцию в некоторое место, а затем по прошествии определённого количества времени её вызывает. При этом блокировка основного потока выполнения программы не происходит.

Чтобы более подробно разобраться в этом необходимо рассмотреть, как движок JavaScript выполняет синхронный и асинхронный код, а также что такое event loop и как он работает.

Синхронный и асинхронный код

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

Выполнение такого кода движок JavaScript выполняет последовательно (т.е. строчку за строчкой). При этом перед тем, как выполнить какую-то строчку кода интерпретатор сначала помещает её в стек вызовов (call stack). Именно в нём происходит её разбор и исполнение. После этого происходит её извлечение из стека и переход к следующей строчке.

Но всё меняется, когда интерпретатор доходит до выполнения асинхронных операций, например . Они также как и синхронные операции сначала попадают в стек вызовов, где происходит их разбор. Но, при разборе интерпретатор понимает, что это некоторый вызов Web API и помещает эту операцию в него. После этого он удаляет эту строчку из call stack и переходит к выполнению следующей строчки кода.

В это же время Web API регистрирует эту функцию и запускает таймер. Как только он завершается, он помещает эту функцию в очередь (callback queue). Очередь – это структура данных типа FIFO. Она хранит все функции в том порядке, в котором они были туда добавлены.

Очередь обратных вызовов (callback queue) обрабатывает цикл событий (event loop). Он смотрит на эту очередь и на стек вызовов (call stack). Если стек вызовов пуст, а очередь нет – то он берёт первую функцию из очереди и закидывает её в стек вызовов, в котором она уже выполняется. Вот таким образом происходит выполнения асинхронного кода в JavaScript.

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

window.setInterval(myFunc, 3000);

Пример, с передачей функции аргументов:

function sayHello(name) {
  alert(`Привет, ${name}!`);
}
setTimeout(sayHello, 3000, 'Василий'); // Привет, Василий!

Пример, с использованием в анонимной функции:

setTimeout(function (name) {
  alert(`Привет, ${name}!`);
}, 3000, 'Василий');

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

Если функция по каким-то причинам не работает, то проверьте действительно ли вы передаёте ссылку на функцию, а неё результат:

function sayHello() {
  console.log('Привет!');
}

// передаём в setTimeout не ссылку на функцию sayHello, а результат её вызова
setTimeout(sayHello(), 3000);

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.

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.

setTimeout()

allows you to specify that a piece of JavaScript code (called an expression) will be run a specified number of milliseconds from when the method was called. The general syntax of the method is:

where is the JavaScript code to run after milliseconds have elapsed.

Here’s a simple example:

When a visitor clicks the button, the method is called, passing in the expression that we want to run after the time delay, and the value of the time delay itself – 5,000 milliseconds or 5 seconds.

Try it yourself! Click the button below and wait 5 seconds:

In the above simple example we embedded the entire code for our JavaScript alert box in the call. More usually, you’d call a function instead. In this next example, clicking a button calls a function that changes the button’s text colour to red. At the same time, this function also sets up a timed function using that sets the text colour back to black after 2 seconds:

Click the button below to see it in action:

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 .

setInterval()

function is very closely related to – they even share similar syntax:

The important difference is that, whereas triggers only once, keeps triggering again and again (unless you tell it to stop).

So when should you use it? Essentially, if you ever find yourself writing code like:

…then you should probably be using instead:

Why? Well, for one thing you don’t need to keep remembering to call at the end of your timed function. Also, when using there’s virtually no delay between one triggering of the expression and the next. With , there’s a relatively long delay while the expression is evaluated, the function called, and the new being set up. So if you need regular, precise timing – or you need to do something at, well, set intervals – is your best bet.

Wrapping Up

One potential caveat to be aware of is the fact that is asynchronous. It queues the function reference it receives to run once the current call stack has finished executing. It doesn’t, however, execute concurrently, or on a separate thread (due to JavaScript’s single-threaded nature).

Although we’re calling with a zero second delay, the numbers are still logged out of order. This is because when ‘s timer has expired, the JavaScript engine places its callback function in a queue, behind the other statements, to be executed.

If you’d like to learn more about what happens when JavaScript runs, I highly recommend this video from JSConf 2014: What the heck is the event loop anyway?

requestAnimationFrame()

You should also be aware of requestAnimationFrame. This method tells the browser that you wish to call a specified function before the next repaint.

When making animations, we should favor over using , as it will fire roughly sixty times a second, as opposed to , which is called after a minimum of milliseconds. By using we can avoid changing something twice between two frame updates.

Here’s an example of how to use to animate a element across the screen:

You could, of course, achieve the same thing using :

But as mentioned, using offers various advantages, such as allowing the browser to make optimizations and stopping animations in inactive tabs.

See the Pen
Animation with requestAnimationFrame by SitePoint (@SitePoint)
on CodePen.

jQuery.delay()

Finally, I’d like to clear up any confusion between the use of the native JavaScript function and jQuery’s delay method.

The method is meant specifically for adding a delay between methods in a given jQuery queue. There is no possibility to cancel the delay. For example, if you wanted to fade an image into view for one second, have it visible for five seconds, and then fade it out for a period of one second, you could do the following:

is best used for everything else.

Note: if you need to repeatedly execute code after a specified delay, then is more suited to the job. You can read more about this function here.

Функция sleep2sec()

function sleep2sec (a, b){
   console.log("Отложенный вызов начался")
   setTimeout(sum, 2000, a, b)
}

Передача параметров в функцию setTimeout осуществляется с третьего аргумента. То есть первым аргументом мы передаём функцию-обработчик, вторым аргументом — задержку в миллисекундах и начиная с третьего идут параметры через запятую.

В нашем случае:

• Первый аргумент функции setTimeout — это функция-обработчик sum
• Второй аргумент функции setTimeout — это число, которое обозначает миллисекунды — это время задержки (отложенного вызова sum)
• Третий аргумент функции setTimeout — это первое передаваемое число в sum
• Четвёртый аргумент функции setTimeout — это второе передаваемое число в sum

Функция sleep2sec — расписаны аргументы для setTimeout — JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цепляем кнопки

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

// EventListener для кнопки старта.startBtn.addEventListener(‘click’, function(e) {e.preventDefault();// Запуск анимации.requestID = requestAnimationFrame(animate);});// EventListener для кнопки стоп.stopBtn.addEventListener(‘click’, function(e) {e.preventDefault();// завершаем анимацию;cancelAnimationFrame(requestID);});// EventListener для кнопки сброса.resetBtn.addEventListener(‘click’, function(e) {e.preventDefault();// Сбрасываем X позицию на ноль.posX = 0;// Очищаем canvas.ctx.clearRect(0, 0, canvas.width, canvas.height);// Отрисовываем изначальный блок.ctx.fillRect(posX, 0, boxWidth, canvas.height);});

Тут у нас три обработчика событий. Первые два запускают и останавливают анимацию, а последний запускается при нажатии на кнопку reset. Это выставит переменной значение . Также это очистит canvas — мы не так сильно обеспокоены производительностью, так что это нормально делать таким ленивым способом — и отрисовывать блок обратно на его стартовой позиции.

Теперь ваша демка готова! Откройте в браузере и кликните на кнопку start, чтобы увидеть анимацию. Вот и сама демка.

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

Summary

• Methods and allow us to run the once/regularly after milliseconds.
• To cancel the execution, we should call with the value returned by .
• Nested calls are a more flexible alternative to , allowing us to set the time between executions more precisely.
• Zero delay scheduling with (the same as ) is used to schedule the call “as soon as possible, but after the current script is complete”.
• The browser limits the minimal delay for five or more nested calls of or for (after 5th call) to 4ms. That’s for historical reasons.

Please note that all scheduling methods do not guarantee the exact delay.

For example, the in-browser timer may slow down for a lot of reasons:

• The CPU is overloaded.
• The browser tab is in the background mode.
• The laptop is on battery.

All that may increase the minimal timer resolution (the minimal delay) to 300ms or even 1000ms depending on the browser and OS-level performance settings.

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);
}

Using Arrow Functions with setTimeout

Arrow functions were introduced with ES6. They have a much shorter syntax than a regular function:

You can, of course, use them with , but there’s one gotcha to be aware of — namely, that arrow functions don’t have their own value. Instead, they use the value of the enclosing lexical context.

Using a regular function:

Using an arrow function:

In the second example, points to the global object (which again, doesn’t have a property).

This can trip us up when using arrow functions with . Previously we saw how we can supply a function called in a with the correct value:

This won’t work when using an arrow function in the method, as the arrow function doesn’t have its own value. The method will still log .

Cleaner Code with Arrow Functions and setTimeout

However, because arrow functions don’t have their own value, it can also work to our advantage.

Consider code like this:

It can be rewritten more concisely with an arrow function:

If you’d like a primer on arrow functions, please read “ES6 Arrow Functions: Fat and Concise Syntax in JavaScript”.

setInterval()

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

setInterval ( expression, interval );

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

Для того, чтобы остановить последующие вызовы в , вам нужно вызывать , где это имя функции .

// Hello показывается каждые 3 секундыlet timerId= setInterval(() => alert('Hello'), 3000);// Повторения прекращаются после 6 секунд с id таймера.setTimeout(() => { clearInterval(timerId); alert('Bye'); }, 6000);

Когда вам нужно использовать ? Когда вам не нужно вызывать в конце спланированной функции. Также, во время использования , фактически не существует задержки между одним срабатыванием настоящего выражения и последующим. А в существует относительно долгая задержка, во время выполнения выражения, вызова функции и выставления нового . Так что если вам нужен обычный точный таймер и надо, чтобы что-то делалось повторно после определенного временного интервала, тогда это ваш выбор.Итак, сейчас мы подобрались к самому интересному. А именно к . А про него нужно рассказать максимально подробно.

requestAnimationFrame()

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

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

До этого разработчики использовали и , чтобы создавать анимации. Проблема тут была в том, что для того, чтобы анимации были плавными, браузер зачастую отрисовывал кадры быстрее, чем они могут показаться на экране. Что вело к ненужным вычислениям. Также ещё одной проблемой в использовании или было то, что эти анимации продолжали работать, даже если страница не находилась в поле видимости пользователя.