JQuery. Выполнить функцию, если промежуток между кликами 2 секунды?

Question

[pavelmosin]

Добрый день.
Есть 4 элемента .test на странице, как сделать, чтобы функция выполнилась, если между кликами по .test прошло 2 секунды?
UPD: Кликов по .test может быть один, а может быть N

$(document).on(
	'click',
	'.test',
	function() {

		alert('HI');
	}
);

Answer 1

[origami1024]

let tmpTimer = undefined;
$(document).on("click", ".test", function() {
    clearTimeout(tmpTimer)
    tmpTimer = setTimeout(() => {
      alert("2000 милисекунд спустя");
      tmpTimer = undefined
    }, 2000);
  console.log("click")
})

UPD: удалил ссылку на код на внешний ресурс из ответа.

Comments

[pavelmosin]

Дополнил вопрос

[origami1024]

Подправил немного

[pavelmosin]

origami1024,
Вариант "1 клик по test":
Присваивается переменной время в миллисекундах. Каким образом отследить, что с момента этого клика прошло 2 секунды и запустить функцию alert?

[origami1024]

В п 2 ты как раз это и делаешь.

в п1 ты заносишь во временную переменную ТЕКУЩЕЕ ВРЕМЯ
в п2 (код п2 располагается в событии клика перед кодом п1) ты сравниваешь ТЕКУЩЕЕ ВРЕМЯ и время во временной переменной. Время в которой на этот момент будет ВРЕМЕНЕМ ПРЕДЫДУЩЕГО КЛИКА

так более понятно?

[pavelmosin]

origami1024,
Всё равно не подходит.
п1 предполагает, что временная переменная будет определена при загрузке страницы, т.е при первом же клике, спустя 2 секунды загрузки страницы сработает код.
А мне нужно определить её во время первого клика по элементу.
И дальше, если прошло 2 секунды - выполнить код. Если был второй клик, через 1 секунду - запустить таймер запуска кода заново

[origami1024]

п1 предполагает, что временная переменная будет определена при загрузке страницы, т.е при первом же клике, спустя 2 секунды загрузки страницы сработает код

нет, п1 предполагает, что врем переменная будет определена при клике

ща настрочу тебе код

[origami1024]

let tmpTime = undefined

$(document).on(
  'click',
  '.test',
  function() {
	if (tmpTime !== undefined) {
		let now = new Date()
		let timeSinceLastClick = now - tmpTime
		if ( timeSinceLastClick > 2000 ) {
  			alert('Прошло 2 секунды, лол')
		}
    		
	}
  tmpTime = new Date()
  });

https://codepen.io/origami1024/pen/eYOyzzb

[pavelmosin]

origami1024,
Прошу прощения, я наверное плохо обьясняю, что мне нужно.

Вариант 1.
первый клик по .test
определилась tmpTime
ничего больше не делаем
tmpTime == 2000
alert("HI")

Вариант 2.
первый клик по .test
определилась tmpTime
tmpTime, к примеру, == 700
Второй клик по .test
tmpTime == 0, пошёл отсчёт заново
tmpTime, к примеру, == 1900
Третий клик по .test
tmpTime == 0, пошёл отсчёт заново
ничего больше не делаем
tmpTime == 2000
alert("HI")

[origami1024]

ну тогда вот

let tmpTimer = undefined;
$(document).on("click", ".test", function() {
  if (tmpTimer === undefined) {
    tmpTimer = setTimeout(() => {
      alert("2000 милисекунд спустя");
      tmpTimer = undefined
    }, 2000);
  } else {
    console.log("click")
  }
});

https://codepen.io/origami1024/pen/eYOyzzb

изменил ответ

[pavelmosin]

origami1024,
У вас функция первого клика выполняется в любом случае.
Мне нужно, чтобы функция первого клика "прерывалась" при втором клике и запускалась функция второго клика. Если был третий клик, то аналогично "Прерывание" -> новый таймер

[origami1024]

ну тогда тебе просто нужно ко второму варианту добавить clearTimeout

let tmpTimer = undefined;
$(document).on("click", ".test", function() {
    clearTimeout(tmpTimer)
    tmpTimer = setTimeout(() => {
      alert("2000 милисекунд спустя");
      tmpTimer = undefined
    }, 2000);
  console.log("click")
})

https://codepen.io/origami1024/pen/eYOyzzb

[pavelmosin]

origami1024, Благодарю вас за ответ и за терпение