Настроить разное действие кнопки, в зависимости от времени нажатия

Question

Пишу приложение на JavaScript.

Есть кнопка (тег <button>).

Нужно реализовать следующее поведение кнопки.

Если клик (события mousedown и следующее за ним событие mouseup) на кнопку длился меньше 2 секунд, то функция func() должна выполняться по окончании клика 1 раз.

Если же этот клик длиться больше 2 секунд, то функция func() должна начать выполниться до события mouseup. При этом её выполение должно периодически повторяться (раз в 500 мс). При mouseup в этом случае повторения функции func() останавливаются.

Если происходит событие mouseout, то в 1 случае func() не выполняется, а во 2 случае - повторения func() прекращаются.

Answer 1

Надеюсь что так.

let btn = {
  el: document.getElementById('btn'),
  is: {
    focus: false,
    clamped: false
  },
  timers: {
    clamped: 200,
    loop: 500
  }
}

btn.el.addEventListener('mouseleave', function(){
  if(btn.is.focus === true) {
    console.clear();
    btn.is.focus = false;
    if(btn.timers.isClamped)
        clearTimeout(btn.timers.isClamped);
    if(btn.timers.isLoop) 
      clearTimeout(btn.timers.isLoop);
  }
});

btn.el.addEventListener('mousedown', function(e){
  if(e.button === 0) {
    btn.is.focus = true;
    btn.is.clamped = false;
    //
    btn.timers.isClamped = setTimeout(function(){
      btn.is.clamped = true;
      btn.timers.isClamped = setTimeout(function Loop(){
        // Тут ваши действия при ЗАЖАТИЕ
        console.info('clemped');
        // Ниже не трогать
        btn.timers.isClamped = setTimeout(Loop, btn.timers.clamped);
      }, btn.timers.clamped);
    }, btn.timers.clamped);
  }
});

btn.el.addEventListener('mouseup', function(e){
  if(e.button === 0) {
    if(btn.is.clamped === false) {
      if(btn.timers.isClamped)
        clearTimeout(btn.timers.isClamped);
      // Тут ваши действия при НАЖАТИЕ
      console.info('click');
      // Ниже не трогать
    } else {
      if(btn.timers.isLoop) 
        clearTimeout(btn.timers.isLoop);
      if(btn.timers.isClamped) 
        clearTimeout(btn.timers.isClamped);
      btn.is.clamped = false;
    }
  }
});

<button id="btn">Button</button>

БЛОГ НА HUSL

Настроить разное действие кнопки, в зависимости от времени нажатия

Ответы (1 шт):