js如何实现函数防抖与节流

防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

节流：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

相关推荐：《javascript高级教程》

js函数防抖与节流的区别：

函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。

个人踩坑

1、通过理解函数防抖与函数节流的概念后，使用闭包实现函数防抖和节流，没有考虑到对于节流，如果用户在下一次请求之前已输入完毕，但是此时不会再进行请求，则会导致最后输入的文字获取其他事件改变不发请求，即漏请求，所以需要加一个setTimeout兜底函数，且在每次准备请求的时候，设一个flag，即是否已经发送请求，如果走了正常周期发送请求，改为true，否则即为false,走setTimout，让setTimeout比剩余事件略长一些，优先走节流定时器请求；

2、如果使用箭头函数，则不需要保存this。

代码实现

 <div>     <div>         <input type="text" id="unDebounce">     </div>     <div>         <input type="text" id="debounce">     </div>     <div>         <input type="text" id="throttle">     </div> </div>

// 函数防抖节流 var elem1 = document.getElementById("unDebounce") var elem2 = document.getElementById("debounce") var elem3 = document.getElementById("throttle") // 不防抖 function ajax1(value){     console.log("不防抖，不节流")     console.log(value) } elem1.addEventListener('keyup',function (e) {     ajax1(e.target.value); }) // 防抖 function ajax2(value) {     console.log(value) } function debounce(func,delay){     console.log("函数防抖")     let timer = null;     return function(...args){         if(timer){             console.log("清除定时器")             clearTimeout(timer)         }         timer = setTimeout(()=>{             console.log("重新计时")             func.call(this,...args)         },delay)     } } let debounceFn = debounce(ajax2,1000) elem2.addEventListener('keyup',function (e) {     debounceFn(e.target.value); }) // // 节流 function ajax3(value){     console.log(value) } function throttle(func,delay){     console.log("函数节流")     let lastTime = 0;     let timer = null;     return function (...args) {         let flag = false ; // 还没发送数据         let now = +new Date().getTime();         if(timer){             clearTimeout(timer)         }         if(now-lastTime>=delay){             console.log("当前时间大于设定时间，开始执行函数")             func.apply(this,args)             console.log("time1",new Date().getTime())             lastTime = now;             flag = true; // 发送了数据         }else{             timer = setTimeout(()=>{                 if(!flag){ // 如果没有发送数据成功，再走这个，兜底发送请求                     func.apply(this,args)                     console.log("time2",new Date().getTime())                 }             },delay-(now-lastTime)+1000) // setTimeout多一些，优先执行周期性请求         }     } } let throttleFn = throttle(ajax3,5000) elem3.addEventListener('keyup',function (e) {     throttleFn(e.target.value); })

以上就是js如何实现函数防抖与节流的详细内容，更多内容请关注技术你好其它相关文章！