Основен пример за използване setTimeout
За да видите принципът на работа, otratite внимание на демонстрацията по-долу, който се отваря изскачащ прозорец на две секунди след натискане на бутона.
Според документацията MDN. setTimeout функция има следния синтаксис:
- timeoutID - цифров идентификатор, който може да се използва функция clearTimeout (), за да отмените таймера.
- функция - функция, за да бъде изпълнена.
- код (алтернативен синтаксис) - блок от код, за да бъде изпълнена.
- закъснение - закъснението в милисекунди, след което функцията ще бъде изпълнена. По подразбиране е 0.
setTimeout и window.setTimeout
Забелязали ли сте, че в по-горе sistaksise използва window.setTimeout. Защо?
Е, setTimeout и window.setTimeout - е по същество същото, като единствената разлика е, че в последния случай се позоваваме на setTimeout като глобален собственост на прозорец.
По мое мнение, това само добавя към сложността, леко предимство - ако дефинирате някъде в setTimeout алтернативен метод, който ще се намира по-рано във веригата на обхват, вие ще имате големи проблеми.
В примерите ще пропусне прозореца на синтаксиса за ползване - вие решавате.
примери за употреба
setTimeout функция поема указател функция като първи аргумент.
Това може да е име на функция:
Променлива, която се отнася до функцията:
SetTimeout също може да премине линията на код:
Въпреки това, не се препоръчва, поради следните причини:
- Такъв метод е трудно да се чете (и също така поддържа и / или отстраняване на грешки).
- Вътре Оценка () се използва, че е безопасна.
- Този метод е по-бавно от другите, защото причинявайки JS интерпретатор.
На Stackoverflow да прочетете повече за това.
Предаване на параметри в setTimeout
В основния сценарий, предпочитан метод крос-браузър за предаване на параметър на функцията за обратно извикване е да предават на анонимната функция като първи аргумент setTimeout.
В примера по-долу, ние избираме случаен набор от поздрав поздрави и да го мине като параметър за да поздравят функция.
алтернативен начин
Както се вижда от синтаксиса в началото на статията, има втори метод за предаване на параметрите на функцията за обратно извикване извършва setTimeout. Това е предаване на параметрите на пряко във setTimeout функция след закъснение.
За съжаление, този метод не работи в IE и 9 по-долу, стойността на всички параметри в тези brazuerah се определи. Има polifill, което е достъпно на ИДС.
Проблемът с «това»
Код, който работи в setTimeout, изпълнени в отделен контекст на изпълнението. Това се превръща в проблем, когато е важно да се запази стойността на този.
Причината за грешката в горния пример е, че тази стойност функция setTimeout е прозореца на глобалната цел (което не е така FirstName имот).
има различни начини за решаване на този проблем.
Изрично позоваване на тази стойност
За изрично определя тази стойност, можете да използвате функцията за свързване ().
Забележка: Функцията за обвързване () е част от стандартната ECMAScript 5, не се подкрепя от по-стари браузъри.
Използване на библиотеката
Много библиотеки имат вградена функция за решаване на този проблем. Например, JQuery е метод jQuery.proxy (). Отнема функция и връща нов комплект с контекста на изпълнение. В нашия случай:
Отказ на таймера
setTimeout функция връща числова номер, който може да се използва функция clearTimeout (), за да отмените таймера.
Вижте примера по-долу. Ако натиснете «Начало броене», обратното броене ще започне. Ако тя е завършена, котенца, ще изчезнат. Ако натиснете "Стоп обратно броене», обратното броене ще бъде отменена.
резюмиране
Налице е също така известно объркване при използването на метода на родния функция setTimeout и забавянето JQuery.
метод забавяне добавя известно забавяне между извикване на метод, няма начин да отмените закъснението. Например, ако искате да направите снимката се вижда, изчакайте пет секунди и след това го скрие отново, можете да използвате за забавянето, както следва:
За всичко останало, по-добро използване на setTimeout.
И накрая, ако имате нужда от известно време, за да изпълни код след известно забавяне, най-добрата форма функция setInterval. Можете да прочетете повече за него тук.
заключение
В тази статия, аз ви показва как да използвате функцията за setTimeout да тече код със закъснение. Аз също показа как да предадете параметрите на setTimeout, използвайте стойността им към функцията за обратно извикване, и как да отмените таймера.
Открили сте грешка? Orphus: Ctrl + Enter
Свързани статии