Добавляем задержку 1000ms на второй клик по картинке: jQuery

Быстрый ответ

Для отложенного выполнения функции в JavaScript используйте setTimeout(). Вот образец:

setTimeout(() => console.log("Немного задержался, но пришел."), 2000);

setTimeout() принимает callback-функцию и время задержки в миллисекундах, где 2000 эквивалентно двум секундам. Это как если бы вы сказали JavaScript: "Сделаешь это, пожалуйста, но не сразу?".

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

Представьте, что вы только что приобрели велосипед, который начинает движение с задержкой в три секунды после того, как вы начинаете педалировать.

Велосипед = Ваша функция
Задержка = `setTimeout()`

Допустим, что велосипед готов к запуску:

setTimeout(() => { 🚲.move(); }, 3000); // Велосипед тронется только через 3 секунды!

Вот как это выглядит на деле:

Сейчас: [🅿️🚲]-----> 3с ожидания (⏲) -----> Будущее: [🚴‍♀️]
# Велосипед в ожидании, пока вы тактично отсчитываете три секунды, прежде чем начать движение!

Применение функции с задержкой

Допустим, вам нужно добавить задержку в 1000 миллисекунд перед воспроизведением звукового сигнала после нажатия на кнопку, чтобы сделать интерфейс более интерактивным:

let isBtnClicked = false;

button.addEventListener('click', () => {
  if(isBtnClicked){
    setTimeout(() => {
      // активировать звуковые эффекты
      isBtnClicked = false; // Возвращаем переменную в исходное состояние для нового нажатия
    }, 1000); // Одна секунда задержки
  }
});

Асинхронные задержки с использованием async/await

Синтаксис async/await помогает в организации кода и управлении асинхронными задачами:

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

async function delayedAction(){
  await sleep(3000); // Подождем 3 секунды
  console.log("И вот ожидаемое сообщение!"); // Подсказка: console.log('Готово!') слишком банально
}

delayedAction();

Управление таймаутом с помощью clearTimeout

Важной возможностью является отмена установленного таймаута:

const delayId = setTimeout(() => {
  /* какой-то отлагаемый код */
}, 3000);

// А затем: Отмена
clearTimeout(delayId); // Какая задержка? Какой таймаут?

Рекурсивный setTimeout для циклических задержек

Рекурсивное использование setTimeout позволяет стильно организовывать повторяющиеся задержки:

function delayedTask() {
  // Задачи? Они начнутся после задержки
  setTimeout(delayedTask, 3000);
}

delayedTask(); // Начинаем процесс задержек

Синхронные задержки: подход с осторожностью

Создание синхронных задержек в JavaScript — это все равно что попытаться приостановить фильм, крича на экран. Можно попробовать, но нужно помнить, что это не рекомендуется:

function sleep(ms) {
  let startTime = Date.now();
  let currentTime;
  do {
    currentTime = Date.now();
  } while (currentTime – startTime < ms);
}

sleep(2000); // Код стопорится на 2 секунды – вот это похоже на дрему!

Погружение в цикл событий

Цикл событий в JavaScript, setTimeout и асинхронное поведение целиком и полностью переплетены вместе. Установка задержки ни на что не влияет; функция в setTimeout просто ждет своего времени для выполнения после истечения заданного периода.

Полезные материалы

1. Глобальная функция setTimeout() – Web API | MDN — полное официальное руководство по setTimeout.
2. JavaScript Timing Events — пошаговое объяснение работы с временными событиями в JavaScript.
3. Планирование: setTimeout и setInterval — глубокий обзор с примерами и детальным объяснением.
4. Дебаунсинг и троттлинг — статья о техниках дебаунсинга и троттлинга в контексте JavaScript.
5. Замыкания JavaScript и Таймеры — статья, объясняющая работу замыканий JavaScript с таймерами.
6. Promise API — раздел о применении промисов с использованием setTimeout для создания задержек.
7. Цикл событий JavaScript — глубокий взгляд на цикл событий в JavaScript и его влияние на тайминг и функцию setTimeout.