如何通过原生js实现一个节流函数和防抖函数？

最新推荐文章于 2024-11-07 13:38:59 发布

爱上猫的程序猿

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量59

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/tang18533952786/article/details/130357132

版权

js防抖特点：

当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间,当事件密集触发时，函数的触发会被频繁的推迟,只有等待了一段时间也没有事件触发，才会真正的执行响应函数

应用场景：

输入框中频繁的输入内容，搜索或者提交信息
频繁的点击按钮，触发某个事件
监听浏览器滚动事件，完成某些特定操作
用户缩放浏览器的resize事件

实现方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>防抖</title>
</head>
<body>
  <button id="debounce">点我防抖</button>
 
  <script>
    window.onload = function() {
      // 1、获取这个按钮，并绑定事件
      var myDebounce = document.getElementById("debounce");
      myDebounce.addEventListener("click", debounce(sayDebounce));
    }
 
    // 2、防抖功能函数，接受传参
    function debounce(fn) {
      // 4、创建一个标记用来存放定时器的返回值
      let timeout = null;
      return function() {
        // 5、每次当用户点击/输入的时候，把前一个定时器清除
        clearTimeout(timeout);
        // 6、然后创建一个新的 setTimeout，
        // 这样就能保证点击按钮后的 interval 间隔内
        // 如果用户还点击了的话，就不会执行 fn 函数
        timeout = setTimeout(() => {
          fn.apply(this, arguments);
        }, 1000);
      };
    }
 
    // 3、需要进行防抖的事件处理
    function sayDebounce() {
      // ... 有些需要防抖的工作，在这里执行
      console.log("防抖成功！");
    }
 
  </script>
</body>
</html>

js节流特点：

当事件触发时，会执行这个事件的响应函数，如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数，不管在这个中间有多少次触发这个事件，执行函数的频繁总是固定的

应用场景：

游戏中的一些设计–王者荣耀英雄的普攻；
监听页面的滚动事件；
鼠标移动事件；
用户频繁点击按钮操作；

实现方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>节流</title>
</head>
<body>
 
  <button id="throttle">点我节流</button>
 
  <script>
    window.onload = function() {
      // 1、获取按钮，绑定点击事件
      var myThrottle = document.getElementById("throttle");
      myThrottle.addEventListener("click", throttle(sayThrottle));
    }
 
    // 2、节流函数体
    function throttle(fn) {
      // 4、通过闭包保存一个标记
      let canRun = true;
      return function() {
        // 5、在函数开头判断标志是否为 true，不为 true 则中断函数
        if(!canRun) {
          return;
        }
        // 6、将 canRun 设置为 false，防止执行之前再被执行
        canRun = false;
        // 7、定时器
        setTimeout( () => {
          fn.apply(this, arguments);
          // 8、执行完事件（比如调用完接口）之后，重新将这个标志设置为 true
          canRun = true;
        }, 1000);
      };
    }
 
    // 3、需要节流的事件
    function sayThrottle() {
      console.log("节流成功！");
    }
 
  </script>
</body>
</html>