概念
函数防抖:就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。(在频繁触发的情况下,只有在停止触发的时候才会执行)
函数节流:限制一个函数在一定时间内只能执行一次。
目的:函数防抖和函数节流都是用来优化高频率执行js代码的手段
简而言之就是在一定时间内,把高频率执行且效果一样的js代码优化掉
使用场景
1、函数防抖:
- 搜索框搜索输入。只需用户最后一次输入完,再发送请求
- 手机号、邮箱验证输入检测
- 窗口大小Resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。
2、 函数节流
- 滚动加载,加载更多或滚到底部监听
- 谷歌搜索框,搜索联想功能
- 高频点击提交,表单重复提交
实现原理:
//函数防抖
// 函数防抖的要点,也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。
// 如果方法多次触发,则把上次记录的延迟执行代码用clearTimeout清掉,重新开始。
// 如果计时完毕,没有方法进来访问触发,则执行代码
$('.select-input').on('input',function(){
var keyWord = $(this).val()
clearTimeout(flag)
flag = setTimeout(function(){
callBack(keyWord)
},1500);
// 函数节流
// 函数节流的要点是,声明一个变量当标志位,记录当前代码是否在执行。
// 如果空闲,则可以正常触发方法执行。
// 如果代码正在执行,则取消这次方法执行,直接return
var canRun = true;
document.getElementById("throttle").onscroll = function(){
if(!canRun){
// 判断是否已空闲,如果在执行中,则直接return
return;
}
canRun = false;
setTimeout(function(){
console.log("函数节流");
canRun = true;
}, 300);
};