3

Добрый день есть такой код

$('.home-dot').on('click',function(){


    var idx = $(this).index()

    $('.home-dot').removeClass('active')
    $(this).addClass('active')


  })

Подскажите как сделать что бы клик функция при клике на home-dot выполнялось не чаще 0.5 секунд. Он нажал функция выполняется. Но если он нажал один раза, потом через 0.1 секунду еще раз, она бы не выполнялось

3 ответа 3

5
function delayCall(delayTime, callback) {

    // время последнего нажатия в миллисекундах
    let lastClick = window.performance.now() - delayTime;

    // возвращаем функцию которая будет повешана на клик
    return function () {
      // получаем время в момент нажатия
      const nowTime = window.performance.now();

      // если прошло времени меньше чем указанная задержка, то ничего не делаем
      if(nowTime - lastClick < delayTime) {
        return;
      }

      // в другом случае записываем время нажатия и вызываем обработчик
      lastClick = nowTime;
      callback.call(this);
    }
  }

В твоем случае использование этой функции будет достаточно простым. Будет доступна для нажатия после 0.5 секунд. от последнего нажатия

$('.home-dot').on('click', delayCall(500, function(){


    var idx = $(this).index()

    $('.home-dot').removeClass('active')
    $(this).addClass('active')


}))

1

Можно воспользоваться функциональными библиотеками underscorejs или lodash.

Вот - пример из библиотеки underscorejs:

throttle _.throttle(function, wait, [options])

Вернёт версию функции, которая, при повторных вызовах, исполнится не чаще одного раза в заданный промежуток wait. Полезна для использования при обработке событий, которые происходят слишком часто.

По умолчанию throttle выполнит функцию, как только вы её вызовете (в первый раз) при последующих вызовах в течение wait выполняться она не будет. Если Вы хотите, чтобы при первоначальном вызове она не выполнялась – нужно передать {leading: false} в качестве options, а для отключения выполнения функции в конце - {trailing: false}.

var throttled = _.throttle(updatePosition, 100);
$(window).scroll(throttled);

debounce _.debounce(function, wait, [immediate])

Вернёт версию функции, исполнение которой начнётся не ранее, чем истечёт промежуток wait, после её последнего вызова. Полезно для реализации логики, которая зависит от завершения действий пользователя. Например, проверить орфографию комментария пользователя лучше будет после того, как он его окончательно введёт, а динамечески перерассчитать разметку - после того, как пользователь закончит изменять размер окна.

По истечению интервала wait, функция будет вызвана с агрументами которые были переданы в самый последний раз.

Если передать true в качестве аргумента immediate, функция будет выполнена сразу, не дожидаясь прошествия wait. Полезно в случаях, когда нужно предотвратить случайные повторные действия, например, отправку формы.

var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);
1

Клик по экрану будет сменять background-color для body только если между кликами прошло 0.5 секунд и последний клик после истечении этого времени сработает, это debounce, но этот вариант для resize экрана больше подходит

function debounce(f, t) {
  return function(args) {
    let previousCall = this.lastCall;
    this.lastCall = Date.now();
    if (previousCall && ((this.lastCall  -  previousCall) <= t)) {
      clearTimeout(this.lastCallTimer);
    }
    this.lastCallTimer = setTimeout(() => f(args), t);
  }
}

function getRandomInt(min, max) {
  const rand = min + Math.random() * (max + 1 - min);
  return Math.floor(rand);
}

function go() {
  const R = getRandomInt(0, 255); // рандомное число от 0 до 255
  const G = getRandomInt(0, 255);
  const B = getRandomInt(0, 255);
  document.body.style.backgroundColor = 'rgb(' + R + ', ' + G + ', ' + B + ')';
}

const lazyFunc = debounce(go, 500);
window.addEventListener('click', () => {
  lazyFunc();
});
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body,
html {
  min-height: 100%;
}

body {
  background-color: rgb(0, 0, 0);
}

Можно ещё throttle использовать, он как раз для кликов. throttle сработает только если между кликами произошло 0.5 секунд и клик. Все клики, где промежуток времени будет меньше 0.5 секунд не сработают

function throttle(f, t) {
  return function (args) {
    let previousCall = this.lastCall;
    this.lastCall = Date.now();
    if (previousCall === undefined // function is being called for the first time
        || (this.lastCall - previousCall) > t) { // throttle time has elapsed
      f(args);
    }
  }
}

function getRandomInt(min, max) {
  const rand = min + Math.random() * (max + 1 - min);
  return Math.floor(rand);
}

function go() {
  const R = getRandomInt(0, 255); // рандомное число от 0 до 255
  const G = getRandomInt(0, 255);
  const B = getRandomInt(0, 255);
  document.body.style.backgroundColor = 'rgb(' + R + ', ' + G + ', ' + B + ')';
}

const lazyFunc = throttle(go, 500);
window.addEventListener('click', () => {
  lazyFunc();
});
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body,
html {
  min-height: 100%;
}

body {
  background-color: rgb(0, 0, 0);
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.