Базовий приклад використання setTimeout
Щоб подивитися принцип роботи, отратіте увагу на демо нижче, яке відкриває спливаюче вікно через дві секунди після того, як натиснута кнопка.
Згідно з документацією MDN. функція setTimeout має наступний синтаксис:
- timeoutID - числовий ідентифікатор, який може використовуватися функцією clearTimeout (), щоб відмінити таймер.
- func - функція, яка буде виконана.
- code (альтернативний синтаксис) - блок коду, який буде виконаний.
- delay - затримка в мілісекундах, після закінчення якої буде виконана функція. За замовчуванням дорівнює 0.
setTimeout і window.setTimeout
Ви помітили, що в сістаксісе вище використовується window.setTimeout. Чому?
Ну, setTimeout і window.setTimeout - це по суті одне і те ж, різниця лише в тому, що в другому випадку ми посилаємося на setTimeout як на властивість глобального об'єкта window.
На мій погляд, це лише додає складності, невелика перевага - якщо ви визначите десь альтернативний метод setTimeout, який буде розташований раніше в ланцюжку областей видимості, у вас будуть великі проблеми.
У прикладах я буду опускати window, який синтаксис використовувати - вирішувати вам.
приклади використання
Функція setTimeout приймає посилання на функцію в якості першого аргументу.
Це може бути ім'я функції:
Змінна, що посилається на функцію:
Також в setTimeout можна передати рядок коду:
Однак це не рекомендується з наступних причин:
- Такий спосіб ускладнює читання (а також супровід і / або налагодження).
- Всередині використовується eval (), що є небезпечним.
- Цей спосіб повільніше інших, тому що викликає інтерпретатор JS.
На StackOverflow можна почитати про це докладніше.
Передача параметрів в setTimeout
У базовому сценарії, найбільш зручною, крос-браузерні спосіб передачі параметрів у функцію зворотного виклику полягає в передачі анонімної функції в якості першого аргументу setTimeout.
У прикладі нижче ми вибираємо випадкове привітання з масиву greetings і передаємо його в якості параметра функції greet.
альтернативний спосіб
Як видно з синтаксису на початку статті, є другий спосіб передачі параметрів у функцію зворотного виклику, виконувану setTimeout. Він полягає в передачі параметрів безпосередньо в функцію setTimeout після затримки.
На жаль, цей метод не працює в IE 9 і нижче, значенням всіх параметрів в цих бразуер буде undefined. Існує поліфілл, який доступний на MDN.
Проблема «this»
Код, що виконується в setTimeout, виконаються в окремому контексті виконання. Це стає проблемою, коли важливо зберегти значення змінної this.
Причина помилки в прикладі вище полягає в тому, що в функції setTimeout значенням this є глобальний об'єкт window (який не має властивості firstName).
Для вирішення цієї проблеми існують різні способи.
Явна завдання значення this
Для явного завдання значення this можна використовувати функцію bind ().
Зверніть увагу: функція bind () є частиною стандарту ECMAScript 5, вона не підтримується старими браузерами.
Використання бібліотеки
Багато бібліотек мають вбудовану функцію для вирішення цієї проблеми. Наприклад, jQuery має метод jQuery.proxy (). Він приймає функцію і повертає нову з встановленим контекстом виконання. У нашому випадку:
скасування таймера
Функція setTimeout повертає числовий id, який може використовуватися функцією clearTimeout (), щоб відмінити таймер.
Подивіться приклад нижче. Якщо натиснути кнопку «Start countdown», почнеться зворотний відлік. Якщо він завершиться, кошенята зникнуть. Якщо натиснути кнопку «Stop countdown», зворотний відлік буде скасований.
Підводячи підсумок
Існує також деяка плутанина при використанні нативной функції setTimeout і методу jQuery delay.
Метод delay додає певну затримку між викликами методів, немає можливості скасувати затримку. Наприклад, якщо ви хочете зробити зображення видимим, почекати п'ять секунд і знову приховати його, ви можете використовувати delay наступним чином:
Для всього іншого краще використовувати setTimeout.
Нарешті, якщо вам потрібно кілька разів виконати код після певної затримки, краще підійде функція setInterval. Ви можете прочитаь про неї докладніше тут.
висновок
У цій статті, я показав, як використовувати функцію setTimeout, щоб виконати код з затримкою. Я також показав, як передавати параметри в setTimeout, використовувати їх значення у функції зворотного виклику, а також як скасувати таймер.
Знайшли друкарську помилку? Orphus: Ctrl + Enter