何为函数防抖 --- JS

2019年12月19日，今天在面试笔试中遇到的题目，其实在学习时，就遇到这个词，但当时并没有深刻的去理解，书到用时方恨少。

一、何为函数防抖？

概念：函数防抖（debounce)，就是指触发事件后，在n秒内函数只能执行一次，如果触发事件后在n秒内又触发了事件，则会重新计算函数执行时间。

理解重点：一个事件短时间会被多次触发，但需求是在一定时间之后，才执行特定动作

 

二、函数防抖产生的原因

在前端开发过程中，有一些事件，比如，scroll、onresize、mousemove等，会被频繁的触发（就是在短时间内被多次触发），不做限制的话，有可能一秒之内会执行几十次、几百次，如果在这些函数内部又执行了其他函数，尤其是执行了操作DOM的函数（操作DOM的很耗费性能的），这不仅会浪费计算机资源，还会降低程序运行速度，甚至造成浏览器卡死，崩溃等致命问题。

 

三、函数防抖如何解决上述问题

函数防抖的要点，是需要一个setTimeout来实现，延迟运行需要执行的代码。如果方法多次触发，则把上次记录的延迟执行代码用clearTimeout清掉，重新开始计时。若计时期间事件没有被重新触发，等延迟时间计时完毕，则执行目标代码。

 

四、函数防抖的代码实现

function debounce(fn,wait) {

      var timer = null；

      return function() {

            if (timer !== null) {

                 clearTimeout(timer)；

            }

           timer = setTimerout(fn,wait)；

      }

}

function handle() {

     console.log(Math.random())；

}

window.addEventListener("resize",debounce(handle,1000))；

 

五、函数防抖的常用场景

一般用在连续的事件只需触发一次回调的场合

1. 搜索框搜索输入，只需要用户最后一次输入完，再发送请求

2.浏览器窗口大小改变后，只需窗口调整完后，再执行resize事件中的代码，防止重复渲染；