防抖和节流(实例讲解) 防抖和节流(实例讲解)

防抖和节流到底是什么？

防抖和节流属于性能优化的知识，它可以有效的降低高频事件触发时，你定义的方法的执行次数。

【防抖和节流(实例讲解)】还是没有感觉？？？那么，来看下面的场景：

用户在搜索框输入关键词（只有当他输入完成时我们才去向服务器发送请求，然后给出搜索结果）
自动保存用户输入填写的表单数据

上面的场景都对应着一个高频事件，即input或者textarea的onKeyUp事件，我们一般是在用户触发这个事件后去向服务器发送请求（这样做的好处是不需要用户去点击搜索按钮，有一种实时查询的感觉）。
那么问题来了，当用户输入一个要查询的关键词，可能需要多次按下和抬起键盘的按键，难道每次onKeyUp的时候我们都要去请求服务器吗？显然不够优雅（因为如果有大量用户同时搜索，服务器压力会很大）。而防抖（debounce）正是要解决类似这样的问题。
在浏览器中我们经常会遇到类似的事件（如浏览器scroll,resize,mousemove...）接下来，我们使用自动保存的场景来说明一下在 JavaScript 中如何实现防抖。
场景描述：用户在textarea中输入文字后，要为他自动保存到服务器（可以理解为保存为草稿）这时我们需要优化请求服务器的次数，需要用到防抖函数。
防抖函数先来看一个常见的错误写法，注意！！！百度中搜出的很多结果都是这个样子，用了之后会发现，你的函数还是会立刻执行，并不会延时执行。

function debounce(fn, delay) { let timer = null return function (args) { if (timer) { clearTimeout(timer) } timer = setTimeout(fn.call(this, args), delay) } }

问题出在 timer = setTimeout(fn.call(this, args), delay) 这一行。
修改成下面的样子，就可以按设定的延时时间执行了：

function debounce(fn, delay) { let timer = null return function (args) { if (timer) { clearTimeout(timer) } timer = setTimeout(function() { fn.call(this, args) }, delay) } }

不要小看这小小的区别，它可能会浪费你大量的时间，而且让你对防抖产生怀疑...
下面贴一个完整的例子，还有防抖在线演示地址，方便你更好的理解这个场景。

防抖和节流.de_wrapper { padding: 20px; display: flex; } .col { width: 40%; } .log { height: 300px; overflow-y: scroll; background-color: #fff; }未使用防抖(每次按键抬起都会触发保存) 使用防抖(停止输入2秒后保存)

节流 // todo..