【JavaScript基础】看我如何解释函数防抖与函数节流
【JavaScript基础】看我如何解释函数防抖与函数节流
博客说明
文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！
说明
前端优化！对于达到某种程度或者某个年限的时候，就会考虑到这个问题了。
就好像前期写的一塌糊涂，后面改的标标致致，也就是代码风格良好的程序员了。
再插一句（本文是第二次编写）
回到正题，在前端js执行的时候，在理想环境，不考虑资源和时间（那本文就不会出现了），代码的执行是无需多虑的，但是在实际场景中，如果我们执行的代码，非常频繁，频率之高，就有可能直接给一些老的设备给送走😂。所以我们需要在满足业务流程下，让代码更“省”！
所以在一定时间内，代码执行的次数不一定要非常多。达到一定频率就足够了。因为有的代码跑得越多，可能带来的效果也是一样的。
所以本次的核心思想就是把js代码的执行次数控制在合理的范围。
既能节省浏览器CPU资源，又能让页面浏览更加顺畅，不会因为js的执行而发生卡顿。这就是函数节流和函数防抖要做的事。
函数防抖（debounce）
关语（官方口语）
函数防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
民语（总结）
简单的说，当一个动作连续触发，则只执行最后一次。
举例
举一个熟悉的例子，因为这个例子实在是都在用，那我岂能不用？
在坐公交的时候，在乘客上车的过程中，司机需要等最后一个人进入才能关门。所以每次进入一个人，司机就会多等待几秒再关门。关门这个动作只需要最后一次进行即可。
应用场景
连续的事件，只需触发一次回调的场景有：
- 搜索框搜索输入。只需用户最后一次输入完，再发送请求
- 手机号、邮箱验证输入检测
- 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。
简单实现
函数防抖在执行目标方法时，会等待一段时间。当又执行相同方法时，若前一个定时任务未执行完，则 clear 掉定时任务，重新定时。
const _.debounce = (func, wait) => {
let timer;
return () => {
clearTimeout(timer);
timer = setTimeout(func, wait);
};
};
函数节流（throttle）
限制一个函数在一定时间内只能执行一次。
举例
乘坐地铁，过闸机时，每个人进入后3秒后门关闭，等待下一个人进入。
应用场景
间隔一段时间执行一次回调的场景有：
- 滚动加载，加载更多或滚到底部监听
- 谷歌搜索框，搜索联想功能
- 高频点击提交，表单重复提交
简单实现
函数节流的目的，是为了限制函数一段时间内只能执行一次。因此，通过使用定时任务，延时方法执行。在延时的时间内，方法若被触发，则直接退出方法。从而，实现函数一段时间内只执行一次。
const _.throttle = (func, wait) => {
let timer;
return () => {
if (timer) {
return;
}
timer = setTimeout(() => {
func();
timer = null;
}, wait);
};
};
感谢
万能的网络
公众号-归子莫，小程序-小归博客
