Проще говоря:
- Регулирование задерживает выполнение функции. Это уменьшит количество уведомлений о событии, которое срабатывает несколько раз.
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 секунды, т.е.b
at .6 секунд будет проигнорирован. Затемc
через 1,2 секунды снова сработает, что снова сбрасывает время. Таким образом,d
будет проигнорирован, аe
будет запущен. - Обезвреживание пистолета на 1 секунду- Когда пользователь видит врага, он щелкает мышью, но он не стреляет. Он щелкнет еще раз несколько раз за эту секунду, но выстрел не выстрелит. Он увидит, есть ли еще патроны, в это время (через 1 секунду после последнего щелчка) пистолет выстрелит автоматически.
Объяснение сценария из реальной жизни: (извините, если это имеет смысл)
У бара есть охранники. Охранник разрешает человеку, который говорит «пойду», войти в бар. Это нормальный сценарий. Любой, кто говорит «Я пойду», может войти в бар.
Теперь есть дроссельная заслонка (дроссельная заслонка 5 сек). Ему нравятся люди, которые откликаются первыми. Любой, кто первым говорит: «Я пойду», тот позволяет этому человеку. Затем он отвергает всех на 5 секунд. После этого все, кто скажет это первым, будут разрешены, а другие будут отклонены на 5 секунд.
Есть еще один Debounce Guard (debounce 5 sec). Ему нравятся люди, которые успокаивают его на 5 секунд. Поэтому, если кто-то говорит: «Я пойду», охранник подождет 5 секунд. Если в течение 5 секунд ему никто не мешает, он позволяет первому. Если кто-то другой скажет «Я пойду» за эти 5 секунд, он отвергнет первого. Он снова начинает 5 секунд, ожидая, пока второй человек увидит, сможет ли второй дать ему душевный покой.
Вы можете визуально увидеть разницу здесь