Какие параметры принимает setTimeout?

Параметры setTimeout

Функция setTimeout используется для отложенного выполнения кода. Она имеет свою сигнатуру и особенности.

Основная сигнатура

setTimeout(callback, delay, arg1, arg2, ...argN);

Параметры

1. callback — обязательный параметр

Функция, которая будет выполнена:

// Функция по имени
function myFunction() {
  console.log('Выполнится через 1 секунду');
}
setTimeout(myFunction, 1000);

// Анонимная функция
setTimeout(() => {
  console.log('Arrow function');
}, 2000);

// String кода (НЕ РЕКОМЕНДУЕТСЯ)
setTimeout('console.log("Плохая практика")', 1000);

2. delay — обязательный параметр (в миллисекундах)

Задержка перед выполнением функции:

// Через 1 секунду (1000 мс)
setTimeout(() => console.log('1 сек'), 1000);

// Через 500 миллисекунд
setTimeout(() => console.log('0.5 сек'), 500);

// Без задержки (но выполнится после всех синхронных операций)
setTimeout(() => console.log('Асинхронно'), 0);

3. arg1, arg2, ...argN — опциональные параметры

Аргументы, которые будут переданы в callback функцию:

// Передача одного аргумента
setTimeout((name) => {
  console.log(`Hello, ${name}!`);
}, 1000, 'John');

// Передача нескольких аргументов
setTimeout((a, b, c) => {
  console.log(a + b + c); // 6
}, 1000, 1, 2, 3);

// С использованием контекста (this)
const user = {
  name: 'Alice',
  greet(greeting) {
    console.log(`${greeting}, ${this.name}!`);
  }
};

setTimeout(user.greet, 1000, 'Hello'); // ОШИБКА: this будет undefined
setTimeout(() => user.greet('Hello'), 1000); // Правильно
setTimeout(user.greet.bind(user), 1000, 'Hello'); // Тоже правильно

Возвращаемое значение

setTimeout возвращает ID таймера (целое число), которое можно использовать для отмены:

const timerId = setTimeout(() => {
  console.log('Это никогда не выполнится');
}, 5000);

// Отмена таймера
clearTimeout(timerId);

// Можно отменить даже если задержка не истекла
if (someCondition) {
  clearTimeout(timerId);
}

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

Отправка данных с задержкой:

let searchQuery = '';

input.addEventListener('input', (e) => {
  searchQuery = e.target.value;
  clearTimeout(searchTimeout);
  
  searchTimeout = setTimeout(() => {
    fetch(`/api/search?q=${searchQuery}`)
      .then(r => r.json())
      .then(data => renderResults(data));
  }, 500); // Ждёт 500мс после последнего ввода (debounce)
});

Анимация поэтапно:

function animateSequence() {
  console.log('Шаг 1');
  
  setTimeout(() => {
    console.log('Шаг 2');
    
    setTimeout(() => {
      console.log('Шаг 3');
    }, 500);
  }, 500);
}

// Или лучше с async/await
async function animateSequenceAsync() {
  console.log('Шаг 1');
  await new Promise(resolve => setTimeout(resolve, 500));
  
  console.log('Шаг 2');
  await new Promise(resolve => setTimeout(resolve, 500));
  
  console.log('Шаг 3');
}

Очистка при смене компонента (React):

useEffect(() => {
  const timerId = setTimeout(() => {
    setMessage('');
  }, 3000);
  
  // Cleanup функция
  return () => clearTimeout(timerId);
}, []);

Важные особенности

1. Минимальная задержка

// setTimeout имеет минимальную задержку ~4мс
// даже если указать 0, это не означает "сразу"
setTimeout(() => console.log('Позже'), 0);
console.log('Раньше'); // Выводится первым

2. this в контексте

const obj = {
  name: 'Object',
  logName() {
    console.log(this.name);
  }
};

// this будет undefined
setTimeout(obj.logName, 1000); // undefined

// Решения:
setTimeout(() => obj.logName(), 1000); // Object
setTimeout(obj.logName.bind(obj), 1000); // Object

3. Взаимодействие с Event Loop

console.log('1. Синхронно');

setTimeout(() => {
  console.log('3. setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('2. Promise (микротаск)');
});

// Вывод:
// 1. Синхронно
// 2. Promise (микротаск)
// 3. setTimeout (макротаск)

Best Practices

• Используйте const timerId если планируете отменять
• Очищайте таймеры в cleanup функциях (React, Vue)
• Предпочитайте async/await с Promise для лучшей читаемости
• Избегайте строк в качестве callback — используйте функции
• Помните про контекст (this) — используйте arrow functions или bind
• Используйте requestAnimationFrame для анимаций вместо setTimeout

Правильное использование setTimeout — это основа для работы с асинхронностью в JavaScript.