Tаймери в JavaScript

В JavaScript разполагаме с 2 метода, които позволяват да изпълним код след/през определен интервал от време

Това са методите (дефинирани в глобалния обект): setTimeout() и setInterval()

Тези методи изпълняват кода асинхронно!

Синхронен и асинхронен JavaScript

Синхронно изпълнение на програма

Когато всяка инструкция се изпълнява след като предходната инструкция завърши изпълнението си.

А-синхронно изпълнение на програма

Всяка следваща инструкция се изпълнява веднага след предходната, независимо дали предходната инструкция е приключила работата си или не.

Пример за синхронно изпълнение

            // докато функцията alert() не приключи изпълнението си, нито един ред след нея няма да се изпълни:
            alert(`1`);

            console.log(`2`);
        

Пример за асинхронно изпълнение

            //функцията setTimeout() се извиква веднага, но кода в нея - едва след 1000ms
            setTimeout(function(){
                console.log(`1`);
            },1000)

            console.log(`2`);
        

            2
            1 // след 1 секунда
        

Забележете, че кода console.log(`2`) не изчаква предходната инструкция да завърши изпълнението си, а се изпълнява веднага.

Syntax

            var timeoutID = setTimeout(function, milliseconds[, arg1, arg2, ...])
        

Метода setTimeout() изпълнява еднократно подадената функция (декларация на функция, анонимна или не) след определен интервал от време, зададен в милисекунди.

Ако функцията е дефинирана с параметри, то можем да подадем съответните аргументи (arg1, arg2, ...)

timeoutID - число, което идентифицира таймера. Можем да използваме тази стойност, за да прекратим изпълнението на setTimeout().

Example: change body background after 2 seconds

            var color = "#DAA371";

            function changeBodyBG(){
                console.log(`changeBodyBG() will change the body background!`);
                document.body.style.backgroundColor = color;
            }

            setTimeout(changeBodyBG, 2000);

            console.log(`After setTimeout()`);
        

            After setTimeout()
            changeBodyBG() will change the body background!
        

Example: createDivsWithTimeout

See the Pen createDivsWithTimeout by Iva Popova (@webdesigncourse) on CodePen.

Reference

setTimeout() @w3schools

setTimeout() @MDN

Syntax

            var intervalID = setInterval(function, milliseconds[, arg1, arg2, ...])
        

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

Функцията ще се извиква непрекъснато, докато действието на setInterval() не се прекрати чрез clearInterval() или до затваряне на прозореца на браузъра.

function трябва да бъде дефиниция на функция: анонимна или променлива, в която е дефиницията.

Ако функция е дефинирана с параметри, то можем да подадем съответните аргументи (arg1, arg2, ...)

Example: changeColorWithSetInterval

See the Pen changeColorWithSetInterval by Iva Popova (@webdesigncourse) on CodePen.

Reference

setInterval() @w3schools

setInterval() @MDN

clearInterval() - Syntax

            clearInterval(intervalID)
        

Прекратява изпълнението на даден setInterval()

intervalID е стойността върната при извикването на setInterval()

            // взимаме ID на setInterval():
            var intervalID = setInterval(foo, 1000);

            // прекратяваме изпълнението на съответния интервал:
            clearInterval(intervalID);
        

Example: clearInterval()

See the Pen Example: clearInterval() by Iva Popova (@webdesigncourse) on CodePen.

clearTimeout() - Syntax

            clearTimeout(timeoutID)
        

Прекратява изпълнението на даден setTimeout()

timeoutID е стойността върната при извикването на setTimeout()

Технически погледнато, clearInterval() и clearTimeout() могат да се използват взаимозаменяемо. Но кодът би бил по чист, ако се придържаме към дадените правила.

clearTimeout() - Example

See the Pen set_or_cancle_bodyBGchange_on_user_input by Iva Popova (@webdesigncourse) on CodePen.

Reference

clearInterval() @w3schools

clearTimeout() @w3schools