Проще говоря:

  • Регулирование задерживает выполнение функции. Это уменьшит количество уведомлений о событии, которое срабатывает несколько раз.
function throttle(callback, interval) {
  let enableCall = true;

  return (...args)=> {
    if (!enableCall) return;

    enableCall = false;
    callback.apply(this, args);
    setTimeout(() => enableCall = true, interval);
  }
}


function helloFromThrottle(){
  console.log("Jesus is saying hi!!!")
}

const foo = throttle(helloFromThrottle,5000)
foo()
  • Debouncing объединит серию последовательных вызовов функции в один вызов этой функции. Это гарантирует, что одно уведомление будет сделано для события, которое срабатывает несколько раз.
function debounce(func,wait){
  let timeout
  return(...arg) =>{
    clearTimeout(timeout);
    timeout= setTimeout(()=>func.apply(this,arg),wait)
  }
}


function SayHello(){
  console.log("Jesus is saying hello!!")
}


let x = debounce(SayHello,3000)
x()

Различия

+--------------+-------------------+-------------------+
|              |  Throttle 1 sec   |  Debounce 1 sec   |
+--------------+-------------------+-------------------+
| Delay        | no delay          | 1 sec delay       |
|              |                   |                   |
| Emits new if | last was emitted  | there is no input |
|              | before 1 sec      |  in last 1 sec    |
+--------------+-------------------+-------------------+

Объяснение по варианту использования:

  • Строка поиска. Не хотите выполнять поиск каждый раз, когда пользователь нажимает клавишу? Хотите выполнить поиск, когда пользователь перестал печатать на 1 секунду. Используйте debounce 1 секунду при нажатии кнопки.
  • Стрельба - между выстрелами из пистолета требуется 1 секунда, но пользователь щелкает мышью несколько раз. Используйте throttle при щелчке мышью.

Смена ролей:

  • Задержка в строке поиска на 1 секунду - если пользователи вводят abcdefghij с каждым символом в 0.4 sec. Затем дроссельная заслонка сработает при первом a нажатии. Он будет игнорировать каждое нажатие в течение следующей 1 секунды, т.е. bat .6 секунд будет проигнорирован. Затем c через 1,2 секунды снова сработает, что снова сбрасывает время. Таким образом, d будет проигнорирован, а e будет запущен.
  • Обезвреживание пистолета на 1 секунду- Когда пользователь видит врага, он щелкает мышью, но он не стреляет. Он щелкнет еще раз несколько раз за эту секунду, но выстрел не выстрелит. Он увидит, есть ли еще патроны, в это время (через 1 секунду после последнего щелчка) пистолет выстрелит автоматически.

Объяснение сценария из реальной жизни: (извините, если это имеет смысл)

У бара есть охранники. Охранник разрешает человеку, который говорит «пойду», войти в бар. Это нормальный сценарий. Любой, кто говорит «Я пойду», может войти в бар.

Теперь есть дроссельная заслонка (дроссельная заслонка 5 сек). Ему нравятся люди, которые откликаются первыми. Любой, кто первым говорит: «Я пойду», тот позволяет этому человеку. Затем он отвергает всех на 5 секунд. После этого все, кто скажет это первым, будут разрешены, а другие будут отклонены на 5 секунд.

Есть еще один Debounce Guard (debounce 5 sec). Ему нравятся люди, которые успокаивают его на 5 секунд. Поэтому, если кто-то говорит: «Я пойду», охранник подождет 5 секунд. Если в течение 5 секунд ему никто не мешает, он позволяет первому. Если кто-то другой скажет «Я пойду» за эти 5 секунд, он отвергнет первого. Он снова начинает 5 секунд, ожидая, пока второй человек увидит, сможет ли второй дать ему душевный покой.

Вы можете визуально увидеть разницу здесь