什么是js函数防抖和函数节流 ？

在实际开发应用中，经常会碰到高频率的事件处理，比如 window 的 scroll， resize 以及 keyup，mousemove 等事件。这些高频率的事件触发会带来一些显著的问题。 如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。 高频率的事件处理函数中，存在着大量的DOM操作，当浏览器的渲染速度跟不上事件触发频率，容易造成页面卡顿，影响用户体验，甚至会造成 CPU 使用率过高导致页面崩溃。 高频率的事件处理函数中，每执行一次事件处理函数时，都需要和服务器通信建立 HTTP 请求，比如页面的搜索功能，那么可能存在短时间内发起了数十条 HTTP 请求的情况，容易消耗服务器资源。 针对这些问题的解决方案，可以采用函数防抖(debounce)和节流(throttle)的方案解决存在的问题，通过防抖和节流可以将多个事件的触发合并成一个，减少事件触发频率。 同时又不影响实际效果。 函数防抖 个人理解 函数防抖就是法师发技能的时候要读条，技能读条没完再按技能就会重新读条。 函数防抖(debounce) : 当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。 防抖代码啊啊啊，监视窗口滚动事件

<script>
function debounce(fn, wait) {
var timeout = null;
return function() {
if(timeout !== null)
clearTimeout(timeout);
timeout = setTimeout(fn, wait);
}
}
// 处理函数
function handle() {
console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));
</script>

我们可以看到，当持续触发scroll事件时，事件处理函数handle只在停止滚动1000毫秒之后才会调用一次，也就是说在持续触发scroll事件的过程中，事件处理函数handle一直没有执行。 函数节流 个人理解 函数节流就是fps游戏的射速，就算一直按着鼠标射击，也只会在规定射速内射出子弹。 函数节流：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如...

点击查看剩余70%