函数防抖(debounce)
- 函数防抖就像某些打怪升级游戏中的法师施放某个技能需要读条,或者说需要蓄力(施放这个法术需要几秒),当技能条没有读满就松开了按键再次重新按下时就要重新读条。以下代码实现了一个简单的防抖函数功能
let timerId;
function debounce(fn, delay){
clearTimeout(timerId);
timerId = setTimeout(fn, delay);
}
const inputa = document.getElementById('inputa');
inputa.addEventListener('keyup', (e) => {
debounce((value = e.target.value) => console.log(value), 2000);
});
函数节流(throttle)
- 函数节流就像王者荣耀的某个英雄施放技能, 一个技能施放之后会有冷却时间。 所以函数节流就是规定间隔一段时间执行,在间隔时间内只执行一次。以下代码实现了一个简单的函数节流函数功能
let timerIdTh;
function throttle(fn, delay){
if(timerIdTh){
console.log('技能冷却中。。。');
return;
}
timerIdTh = setTimeout(() => {
clearTimeout(timerIdTh);
timerIdTh = '';
fn();
}, delay);
}
const buttona = document.getElementById('buttona');
buttona.addEventListener('click', (e) => {
throttle(() => console.log('哦里呀给'), 2000);
});
本文标题:函数防抖(debounce)与函数节流(throttle)
文章作者:黄洪涛
发布时间:2019年05月05日 - 23:05
最后更新:2019年05月05日 - 16:05
原始链接:https://hongtao-huang.github.io/函数防抖与函数节流/
许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。
网友评论