【自定义函数工具库】- 函数节流与函数防抖

最新推荐文章于 2024-04-10 14:31:48 发布

Bennnnnnn

最新推荐文章于 2024-04-10 14:31:48 发布

阅读量398

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Bennnnnnn/article/details/127554683

版权

今天学习了函数节流与防抖对此做点小结

文章目录

函数节流
- 注意点
函数防抖
- 小结

函数节流

函数节流与防抖在做什么事情呢？其实是在控制事件处理程序的执行频率

但我们为什么要控制事件回调的执行频率呢？是因为在浏览器当中有一些事件比如说 onresize事件也就是窗口的变化事件和 mousemove鼠标移动事件还有 scroll事件窗口滚动事件这些事件的触发频率非常高极有可能会造成页面卡顿如果说在这个事件处理程序当中还包含了与后端的交互这样还会给后端增加很多压力所以这个时候函数的节流与防抖控制频率就显得非常重要了

下面通过代码实现向大家演示 节流

04-throttle.js

// 第一个参数是回调 第二个参数是等待间隔
function throttle(callback, wait){
  // 定义开始时间
  let start = 0;
  // 返回结果是一个函数
  return function(e){
    // console.log('iloveyou');
    // 获取当前的时间戳
    let now = Date.now();
    // 判断
    if(now - start >= wait){
      // 若满足条件 则执行回调函数
      callback.call(this, e);
      // 修改开始时间
      start = now;
    }
  }
}

04-throttle.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>节流测试</title>
  <script src="04-throttle.js"></script>
  <style>
    body{
      height: 2000px;
      background: linear-gradient(#125,#eae);
    }
  </style>
</head>
<body>
  <script>
    //绑定滚动事件
    // window.addEventListener('scroll',function(){
    //   console.log(Data.now());
    // })

    window.addEventListener('scroll',throttle(function(e){
      // console.log(Date.now());
      // console.log(this);
      console.log(e);
    },500));
  </script>
</body>
</html>

在这里插入图片描述
如果在 04-throttle.html 单纯调用 function函数鼠标一次滚动可能会有十几次的滚动事件触发而这对我们服务器性能的消耗是很大的我们需要对此进行性能的优化我们在 04-throttle.js 自定义了throttle函数它具备两个形参第一个是我们的回调函数 第二个是时间间隔 我们设定在同一时间间隔中只执行一次callback() 这样便会降低事件触发的频率提升性能优化

注意点

时间间隔通过获取两次时间戳进行差值判断就可以得到
throttle自定义函数的返回值必须是一个函数事件否则无法被监听
JS中 this指向的是事件源谁调用this就是谁的

函数防抖

函数防抖跟函数节流有些区别，函数防抖 是当事件触发之后它不会立即执行回调函数而是会等待一段时间再去执行回调在等待的时间过程中如果你再次触发了事件它会再次等待上一个事件处理程序则不会执行直到有新事件触发等待超过时间间隔才进行回调

举个例子，我们设置时间间隔是1s 事件是A 当我们触发事件A超过等待时间间隔(1s)时触发事件A回调而如果是我们触发了时间A并在同一等待时间间隔内(1s)再次触发事件A(一次或多次，例如总共触发了5次) 那么触发事件A只有在最后一次触发才回调(也就是第5次才会进行回调，前面的回调都被取消因为是最后一次所以最后不会有新的触发事件A了等待时间超过时间间隔了1s了所以第5次触发回调进行)

下面通过代码实现向大家演示 防抖

05-debounce.js

function debounce(callback, time){
  // 定时器变量
  let timeId  = null;
  // 返回一个函数
  return function(e){
    // 判断
    if(timeId !== null){
      // 清空定时器
      clearTimeout(timeId);
    }
    // 启动定时器
    timeId = setTimeout(() => {
      // 执行回调
      callback.call(this, e);
      // 重置定时器
      timeId = null;
    }, time);
  }
}

05-debounce.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>防抖测试</title>
  <script src="05-debounce.js"></script>
</head>
<body>
  <input type="text">
  <script>
    let input = document.querySelector('input');

    // 当键盘按下时 会有对应的keyCode返回
    // input.onkeydown = function(e){
    //   console.log(e.keyCode);
    // }

    input.onkeydown = debounce(function(e){
      console.log(e.keyCode);
    },1000);
  </script>
</body>
</html>

setTimeout定时器有个特点是它内部的this指向外层作用下this的值所以 05-debounce.js 中的callback参数直接写this就可以

debounce的返回值必须是一个函数因为我们本来就需要给onkeydown绑定(/定义)事件如果不是函数的话 onkeydown事件在触发之后没法去执行回调

return返回的函数需要加事件回调（事件对象）参数因为内部要用到的话会往里边传入参数如果你没有形参去接收到时候没有办法获取到事件对象

在这里插入图片描述

下图的timeId虽然设置为null 但debounce函数在二次调用的情况下timeId并不等于null 而是上个定时器留给我们的timeId值所以下面的if判断如果过了时间间隔执行if判断是无用功的因为上个定时器已经执行完便已经失效了我们想要的是：当未超过同一时间间隔时, 调用新的定时器则清空上一个定时器

超过同一时间间隔应该交由setTimeout定时器去重置timeId值就行降低性能资源消耗

在这里插入图片描述

所以，if判断和setTimeout对timeId值的重置都不能省因为一个是未执行的清空另一个是执行完的清空我们的目标效果是同一时间间隔有多个定时器调用时只执行最后一个定时器的回调

而下图中的 timeId = null 如果没有写的话目标效果虽然也能达成但是有小瑕疵逻辑并不严谨执行了些无用代码因为它每一次都要进入if判断语句去清空（如果定时器执行完的话（也就是超过了time时间间隔后才执行任务））它的清空是没用的因为上个定时器已经执行完失效了所以这会造成浪费性能 正确方式是 在setTimeout定时器最后补上语句 timeId = null 重置定时器变量当我们在上一次定时器执行成功时执行回调之后应该要将这个定时器变量给它复原以此来优化性能更为合理一些

在这里插入图片描述