防抖与节流

         防抖节流是前端开发中常用的两种性能优化技术，这篇就带大家了解一下防抖节流。

        首先我们需要了解什么是防抖和节流。

        防抖 (Debouncing) 是指在一定时间内，多次触发同一个事件，只执行最后一次操作。例如，当我们在搜索框中输入关键词时，输入框会不断触发 oninput 事件，如果每次输入都去请求服务器获取数据，会造成不必要的请求浪费。此时就可以使用防抖技术，将一定时间内的多次触发合并为一次操作，只请求一次服务器数据，减少了请求次数和服务器负载。

        节流 (Throttling) 是指在一定时间内，多次触发同一个事件，只执行第一次操作。例如，当我们拖动网页上的滚动条时，会不断触发 onscroll 事件，如果每次触发都去计算滚动距离，会造成浏览器性能下降。此时就可以使用节流技术，将一定时间内的多次触发限制为一次操作，只计算一次滚动距离，提高了浏览器性能和用户体验。

        这两种技术利用的都是延迟定时器，那接下来让我们用代码实现它们吧！

        防抖：主要思路就是每次点击，都会去执行recriveDebounceFun函数，这个函数是debounceFun返回来的函数，进入该函数，会首先判断定时器是否开了，也就是判断用户是否已经点击了，如果用户连续点击两次，那么当点击第二次的时候，就会清除第一次的定时器，也就是第一次白点击了，只会执行最后一次开的的定时器中的回调函数。代码如下：

//这个就是html里面的点击按钮，通过连续点击来展示效果
let debounceBtn = document.querySelector('.debounceBtn');let timer = null;//这个是封装的防抖函数，会返回一个函数function debounceFun(fn, delay) {return function(){if (timer) {clearInterval(timer)}//这里arguments是当参数不确定时，可接受参数，是一个伪数组的形式let args=arguments;timer = setTimeout(() => {//fn的this指向是不变，并且能够接收到参数fn.apply(this,args);}, delay)}}//这里我们接收上面函数返回来的而参数let recriveDebounceFun=debounceFun(fn,1000)//这个是用户想要执行的操作function fn() {console.log(arguments[0]+arguments[1]);}debounceBtn.onclick = function(){recriveDebounceFun("我是参数","hello")}

        节流：代码整体长得和上面差不多，就只讲一下思路，它就像是一个空闲教室，一开始，没有班级上课，那么它就是空闲的，那么我们给它一个标记：isRun=true，当你们班要去上课，那么上课这件事 你可以作为定时器的回调函数，首先，应该判断这个教室是否是空闲的，如果不是，你们就无法上课，也就是如果按钮已经被点击并且没有执行用户给的函数时，你再点击也是没用的。当教室是空闲的，那么你们班就可以在此上课，此时我们需要标记一下：isRun=false，表示这个教室已经有人占用，那么其他人就不能进来。

let throttleBtn=document.querySelector('.throttleBtn');let isRun=true;function throttleFun(fn,delay){return function(){if(isRun){isRun=false;setTimeout(()=>{fn.apply(this,arguments);isRun=true;},delay)}}}let receiveThrottleFun=throttleFun(fn,2000)function fn(){console.log(arguments[0]);}throttleBtn.onclick=function(){receiveThrottleFun("你好")}

        备注：关于arguments，可能很多人看到arguments有点蒙，它主要作用就是当函数的参数不确定时，我们就可以用arguments来接收，这里有个小案例：

function fun1(){let sum=0;for(let i=0;i<arguments.length;i++){sum+=arguments[i];}console.log(sum);//15
}fun1(1,2,3,4,5)

        就讲到这里啦！加油加油！