一、函数防抖(debounce)
就是指触发事件后,在 n 秒内函数只执行最后一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间
废话不多说,上代码展示
<body>
<input type="text" id='unDebounce'>
</body>
</html>
<script>
//防抖函数
function debounce(fn, delay) {
var delay = delay || 200;
var timer;
return function () {
var th = this;
var args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
timer = null;
fn.apply(th, args);
}, delay);
};
}
//模拟一段ajax请求
function ajax(content){
console.log('ajax request ' + content)
};
let inputa = document.getElementById('unDebounce');
function fn(e){ ajax(e.target.value) }
//防抖函数,处理多次被触发的事件,只执行最后一次
inputa.addEventListener('input', debounce(fn,1000))
</script>
我们加入了防抖以后,当你在频繁的输入时,并不会发送请求,只有当你在指定间隔内没有输入时,才会执行函数。如果停止输入但是在指定间隔内又输入,会重新触发计时。
个人理解:函数防抖就是王者荣耀里英雄放技能的时候要有冷却,技能冷却没完再按技能就会重新计算冷却时间。
防抖使用场景:
-
搜索框搜索输入。只需用户最后一次输入完,再发送请求
-
手机号、邮箱验证输入检测
-
窗口大小Resize。只需窗口调整完成后,计算窗口大小。防止重复渲染
二、函数节流(throttle)
就是指连续触发事件,但是在 n 秒中只执行一次函数
废话不多说,上代码展示
<body>
<input type="text" id='unDebounce'>
</body>
</html>
<script>
//节流函数
function throttle(fn, interval) {
var last;
var timer;
var interval = interval || 200;
return function () {
var th = this;
var args = arguments;
var now = +new Date();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(function () {
last = now;
fn.apply(th, args);
}, interval);
} else {
last = now;
fn.apply(th, args);
}
}
}
//模拟一段ajax请求
function ajax(content){
console.log('ajax request ' + content)
};
let inputa = document.getElementById('unDebounce');
function fn(e){ ajax(e.target.value) }
//防抖节流,无论你输入多块,每隔1秒钟执行一次
inputa.addEventListener('input', throttle(fn,1000))
</script>
不管我们设定的执行时间间隔多小,总是1s内只执行一次。
个人理解: 函数节流就是fps游戏(如穿越火线)的射速,就算一直按着鼠标射击,也只会在规定射击时间内射出一定子弹。
节流使用场景:
-
滚动加载,加载更多或滚到底部监听
-
谷歌搜索框,搜索联想功能
-
高频点击提交,表单重复提交
三、总结
函数防抖和函数节流都是防止某一时间频繁触发,但是这两兄弟之间的原理却不一样。
函数防抖是某一段时间内只执行一次,而函数节流是间隔时间执行。
博主博客会持续更新,敬请期待!