js函数防抖与节流的实现

fantastic BABY@.

已于 2022-10-11 17:45:26 修改

阅读量726

点赞数 3

于 2021-12-01 14:56:38 首次发布

本文链接：https://blog.csdn.net/uiuihrdtf/article/details/121654153

版权

一、什么是函数的防抖

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

例子：坐公交车的时候，如果司机看到有人上车之后，就会多等待 5分钟，此时如果又有人进来（5分钟之内重复有人上车），那么公交司机就会以最后那个人为基础继续等待5分钟。所以，“函数的防抖”的关键在于，在一个事件发生一定时间之后，才执行特定动作。

二、为什么需要函数防抖

　　在前端开发过程中，有一些事件，例如：onresize，scroll，mousemove ,mousehover 等等，会被频繁的触发，如果不做限制，有可能一秒之内执行几十次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数，那不仅会浪费计算机资源，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。

三、函数防抖的代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>防抖</title>
</head>
<body>
  <input type="text" id="inp">
  <script>
  var oInp=document.getElementById('inp');
  function debounce( fn,delay){
    let timer = null
    return function(){
      var self=this,arg=arguments;
      clearTimeout(timer)
      timer = setTimeout(function(){
         fn.apply(self,arg);
      },delay)
   }
  }
  function ajax(e) {
    console.log(e,this.value)
  }
  oInp.oninput=debounce(ajax,1000);
  </script>
</body>
</html>

对于debounce(fn,delay)，返回值是一个函数，所以等同于el.οninput=denouceFn，只是一个新的事件处理函数而已，它的参数中就会包含事件对象，也就是arguments中包含事件对象。

四、什么是函数的节流

概念：函数节流（throttle），就是让一个函数无法在很短的时间间隔内连续调用，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用。

例子：坐公交车的时候，如果司机看到有人上车之后开始计时5分钟，5分钟一到马上发车。所以，“函数的节流”的关键在于，在一个事件发生一定时间之后执行一次。

五、函数节流的实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>节流</title>
</head>
<body>
  <input type="text" id="inp">
  <script>
  var oInp=document.getElementById('inp')
  function throttle( fn,delay){
    let timer = null
    return function(){
     var self=this,arg = arguments;
     if(timer) return;
     timer = setTimeout(function(){
       fn.apply(self,arg)
       clearTimeout(timer)
       timer = null;
     },delay)
   }
  }
  function ajax(e) {
    console.log(e,this.value)
  }
  oInp.oninput=throttle(ajax,1000)
  </script>
  <script src="./index.js"></script>
</body>
</html>

这里面clearTimeout(timer)清除了timer指向的定时器，timer=null，是修改timer的指向，是timer这个变量不指向某个定时器，然而并没有清除这个定时器，定时器依旧可以使用