JS 函数节流与防抖
前言
事件的触发权很多时候属于用户，可能会出现下列问题：
- 向后台发送数据，用户频繁触发，对服务器造成压力；
- 一些浏览器事件，如window.onresize，window.mousemove等，触发的频率会非常高，会造成浏览器性能问题。
如果碰到这些问题，那就需要用到函数节流与防抖了。
一、函数节流（throttle）
函数节流：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次。
有个需要频繁触发函数，处于优化性能角度，在规定时间内，只让函数触发的第一次生效，后面不生效。
1.如何实现
其原理是用时间戳来判断是否已到回调执行时间，记录上次执行的时间戳，然后每次触发scroll事件执行回调，回调中判断当前时间戳距离上次执行的时间戳的间隔是否已经达到规定时间段，如果是，则执行，并更新上次执行的时间戳，如此循环；
html, body { height: 500%; // 让其出现滚动条 }
function throttle(fn,delay){ // 记录上一次函数触发时间 var lastTime = 0; return function(){ // 记录当前函数触发时间 var nowTime = Date.now(); if(nowTime - lastTime > delay){ // 修正this指向 fn.call(this); // 同步时间 lastTime = nowTime; } } } document.onscroll = throttle(function() { console.log('scroll事件被触发了' + Date.now()) }, 200)
function throttle(fn, interval = 300) { let canRun = true; return function () { if (!canRun) return; canRun = false; setTimeout(() => { fn.apply(this, arguments); canRun = true; }, interval); }; }
运用闭包的特性 -- 可以使变量 lastTime 长期保存着内存中
2.函数节流应用场景
需要间隔一定时间触发回调来控制函数调用频率：
- DOM 元素的拖拽功能实现（mousemove）
- 搜索联想（keyup）
- 计算鼠标移动的距离（mousemove）
- 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
- 监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次
二、函数防抖（debounce）
防抖函数：一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。
1.如何实现
原理：
第一次调用函数时，创建一个定时器，在指定的时间间隔后执行代码。第二次调用函数时，会清除前一个定时器并设置另一个。如果前一个定时器尚未执行，就将其替换成一个新的定时器，然后延迟一定时间再执行。
<button id='btn'>按钮</button> <script> function debounce(fn,delay){ // 记录上一次的演示器 var timer = null; return function(){ // 清除上一次延时器 clearTimeout(timer) timer = setTimeout(function(){ fn.call(this); }，delay) } } document.getElementById('btn').onclick = debounce(function() { console.log('点击事件被触发' + Date.now()) }, 1000) </script>
运用闭包的特性 -- 可以使变量 timer 长期保存着内存中
2.函数防抖应用场景
对于连续的事件响应我们只需要执行一次回调：
- 每次 resize/scroll 触发统计事件
- 文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）
三、总结
函数节流 和 函数防抖 的核心就是限制某一个方法频繁触发，巧妙运用 setTimeout 来存放待执行的函数，这样可以很方便的利用 clearTimeout 在合适的时机来清除待执行的函数。
使用 函数节流 和 函数防抖 的目的，是为了节约计算机资源。