Как работает js задержка выполнения через setTimeout

Если вам нужна js задержка выполнения в JavaScript, используйте setTimeout. Это встроенный API браузера, поэтому jQuery для его запуска не нужна. Callback попадет в очередь после указанного интервала и не прервет текущий код.

Как работает js задержка выполнения

Передайте функции задержку в миллисекундах. Вызов ниже покажет сообщение минимум через 2 секунды после запуска таймера:

setTimeout(function(){
  alert("Сообщение появилось через 2 секунды");
}, 2000);

Число 2000 задает минимальное ожидание. Если основной поток занят, браузер запустит callback позже, после завершения текущего кода.

Синтаксис setTimeout

Синтаксис описан в документации MDN по setTimeout:

var timeoutID = window.setTimeout(callback, delay, param1, param2, ...);
var timeoutID = window.setTimeout(code, delay);

Это схема вызова: многоточие обозначает произвольное количество дополнительных аргументов. Копировать многоточие в вызов не нужно.

Вызов возвращает идентификатор таймера. Передайте этот идентификатор функции clearTimeout(), если задержку нужно отменить.

• callback – функция, которую браузер запустит после задержки.
• delay – интервал в миллисекундах.
• param1, param2 – значения, которые браузер передаст callback.
• code – строка JavaScript-кода в альтернативной форме вызова.
• timeoutID – идентификатор, нужный для отмены таймера.

Значение задержки 0 не запускает функцию мгновенно. Браузер поставит callback в очередь и выполнит его после текущего стека вызовов.

setTimeout и window.setTimeout

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

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

Примеры использования

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

function explode(){
  alert("Boom!");
}

setTimeout(explode, 2000);

Ссылку на функцию можно сохранить в переменной:

var explode = function(){
  alert("Boom!");
};

setTimeout(explode, 2000);

Для короткого callback подойдет анонимная функция:

setTimeout(function(){
  alert("Boom!");
}, 2000);

Строковый callback тоже поддерживается, но использовать его не стоит:

setTimeout("alert('Boom!')", 2000);

Браузер обработает строку как JavaScript-код через механизм, похожий на eval(). Такой код сложнее читать и отлаживать, а сборка строки из данных создает лишний риск. Передавайте функцию, чтобы callback оставался отдельной частью программы.

Передаем параметры в setTimeout

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

function greet(greeting){
  console.log(greeting);
}

function getRandom(arr){
  return arr[Math.floor(Math.random() * arr.length)];
}

var greetings = ["Hello", "Bonjour", "Guten Tag"],
    randomGreeting = getRandom(greetings);

setTimeout(function(){
  greet(randomGreeting);
}, 1000);

После задержки минимум в 1 секунду callback вызовет greet() с выбранной строкой. Замыкание дает callback доступ к переменной randomGreeting.

Передача параметров после задержки

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

setTimeout(greet, 1000, randomGreeting);

Браузер передаст randomGreeting в первый аргумент функции greet(). Этот вариант короче, когда callback уже объявлен отдельно.

Internet Explorer 9 и более ранние версии не поддерживают передачу параметров после задержки. Для старого браузера используйте обертку из предыдущего примера или полифилл из раздела о setTimeout в документации MDN.

Контекст this в отложенном вызове

Передача метода объекта в setTimeout отделяет функцию от объекта-владельца. Поэтому callback теряет ожидаемый контекст this:

var person = {
  firstName: "Jim",
  introduce: function(){
    console.log("Hi, I'm " + this.firstName);
  }
};

person.introduce();
// Outputs: Hi, I'm Jim

setTimeout(person.introduce, 50);
// Outputs: Hi, I'm undefined

В первом вызове точка передает объект person как контекст. Во втором вызове таймер получает только ссылку на функцию, поэтому this.firstName не указывает на имя из объекта.

Закрепите this через bind()

Метод bind() создает новую функцию с заранее заданным контекстом. Передайте ему объект person:

setTimeout(person.introduce.bind(person), 50);

Теперь callback сохраняет связь с объектом, а консоль выводит имя Jim.

Используйте функцию-обертку

Анонимная функция тоже сохраняет нужный объект в замыкании:

setTimeout(function(){
  person.introduce();
}, 50);

Этот вариант показывает, какой объект должен вызвать функцию.

Примените jQuery.proxy()

В старом коде на jQuery контекст можно закрепить методом jQuery.proxy(). Он возвращает функцию, которая вызывает исходный метод с объектом person:

setTimeout($.proxy(person.introduce, person), 50);

Для нового кода выбирайте bind() или функцию-обертку. Вариант с jQuery.proxy() сохраняйте при поддержке существующего проекта на jQuery.

Отключение таймера

Сохраните идентификатор таймера, а затем передайте его в clearTimeout():

function myFunction(){
  console.log("Таймер сработал");
}

var timer = setTimeout(myFunction, 3000);
clearTimeout(timer);

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

Очередь setTimeout и jQuery delay

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

console.log(1);

setTimeout(function(){
  console.log(2);
}, 0);

console.log(3);

// Outputs: 1, 3, 2

Сначала браузер выполнит синхронные строки и выведет 1 и 3. Затем очередь передаст управление callback, который выведет 2.

Метод delay добавляет паузу внутри очереди эффектов jQuery. Поэтому он подходит для последовательности анимаций:

$("img").fadeIn(1000).delay(5000).fadeOut(1000);

В этом примере изображение появится за 1 секунду, останется видимым 5 секунд, а затем исчезнет за 1 секунду. Для задержки произвольной функции используйте setTimeout.

Если код должен запускаться снова через одинаковые интервалы, применяйте setInterval. Для однократного отложенного вызова оставляйте setTimeout.

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