js-函数节流和防抖 js-函数节流和防抖

一.什么是函数防抖&节流

函数防抖

函数防抖(debounce)：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时
函数节流(throttle):

当持续触发事件时，在规定时间段内只能调用一次回调函数。
如果在规定时间内又触发了该事件，则什么也不做,也不会重新计时，即使一直触发，也是每隔n秒执行一次回调
相同点/不同点

相同:都是限制回调函数调用频率，避免大量计算导致的页面卡顿.
不同:防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行一次回调函数.

二.为什么需要函数防抖&节流

前端开发过程中，有一些事件，常见的例如，onresize，scroll，mousemove ,mousehover 等，会被频繁触发（短时间内多次触发），不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会浪费计算机资源，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。这种问题显然是致命的。
在例如回调函数里面代码块比较沉重时，这样频繁触发，就会大大降低性能了
除此之外，短时间内重复的 ajax 调用不仅会造成数据关系的混乱，还会造成网络拥塞，增加服务器压力，显然这个问题也是需要解决的

三.函数的防抖

防抖的思路

函数防抖的要点，是需要一个 setTimeout 来辅助实现，延迟运行需要执行的代码。如果方法多次触发，则把上次记录的延迟执行代码用 clearTimeout 清掉，重新开始计时。若计时期间事件没有被重新触发，等延迟时间计时完毕，则执行目标代码
既然前面都提到了计时，那实现的关键就在于setTimeOut这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现：
防抖代码实现

function debounce(fn, delay) { // 创建一个标记用来存放定时器的返回值 var timer = null; return function (e) { // 每当用户输入的时候把前一个 setTimeout clear 掉 clearTimeout(timer); // 然后又创建一个新的 setTimeout, // 样就能保证interval 间隔内如果时间持续触发， // 就不会执行 fn 函数 timer = setTimeout(() => { //这个this的修正是为了handle函数里面的this指向事件侦听对象，就是docment元素， //如果不修正handle函数中的this就指向window //还有这个arguments 是为了参数 e 穿到handle函数中 fn.apply(this, arguments); }, delay); }; }// 处理函数 function handle(e) { this.style.color="red"; console.log(this); console.log('防抖：', Math.random()); }var bn=document.querySelector("button"); bn.addEventListener("click",debounce(handle, 500));
应用场景
函数防抖一般用在什么情况之下呢？一般用在，连续的事件只需触发一次回调的场合。具体有：
两个条件:
- 如果客户连续的操作会导致频繁的事件回调(可能引起页面卡顿).
- 客户只关心"最后一次"操作(也可以理解为停止连续操作后)所返回的结果.
例如：
1. 搜索框搜索输入。只需用户最后一次输入完，再发送请求；
2. 用户名、手机号、邮箱输入验证；
3. 给按钮加函数防抖防止表单多次提交
4. 按钮点击:收藏,点赞,心标等

四.函数的节流

节流的思路

第一次先设定一个变量true，第二次执行这个函数时，会判断变量是否true，是则返回。
当第一次的定时器执行完函数最后会设定变量为flase。
那么下次判断变量时则为flase，函数会依次运行
节流代码的实现

function throttle(fn, delay = 100) { //首先设定一个变量，在没有执行我们的定时器时为null let timer = null; return function () { //当我们发现这个定时器存在时，则表示定时器已经在运行中，需要返回 if (timer) return; timer = setTimeout(() => { fn.apply(this, arguments); timer = null; }, delay); } }// 处理函数 function handle(e) { console.log(this); console.log('节流：', Math.random()); }var bn = document.querySelector("button"); bn.addEventListener("click", throttle(handle, 500));
应用场景
两个条件:
- 客户连续频繁地触发事件
- 客户不再只关心"最后一次"操作后的结果反馈.而是在操作过程中持续的反.
例如：
1.onscroll滚动时候的
【js-函数节流和防抖】2.游戏中的刷新率
3.DOM元素拖拽