前端JS防抖与节流

浅浅的花香味﹌ 2023-10-01 09:05 171阅读 0赞

**前言：** 防抖与节流是前端常用的优化方案，基本概念懂的都懂，不再多说。下面看一下实现方法

### 一、防抖 ###

**应用场景：**  
常见于按钮点击或者一些不算高频触发的事件

<!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>
    </head>
    
    <body>
      <button id="debounceID">防抖</button>
      <script>
        function debounce(method, wait) {
          
          let timeout; //设置闭包变量
          return function () {
          
            if (!!timeout) clearTimeout(timeout); //如果当前有定时器执行，清空定时器
            timeout = setTimeout( () => {
           //开启定时器
              // func('回调参数')不绑定this指向，调用时效果一样，但是可能导致this变化从而产生不必要的bug
              method.call(this,'回调参数'); //调用传入的函数，并且绑定this指向，可以确保上下文this指向不变
            }, wait);
          };
        }
        let debounceID = document.getElementById("debounceID");
        debounceID.onclick = debounce(function (value) {
           //点击触发按钮事件，调用防抖函数
          console.log(value)
        }, 500);
      </script>
    </body>
    
    </html>

### 二、节流 ###

**应用场景**  
常见于高频触发事件，如onscroll、onwheel…等

<!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>
      <style>
        div{
          
          height: 1500px;
          width: 100px;
          background-color: #000;
    
        }
      </style>
    </head>
    
    <body>
        <div ></div>
      <script>
        function throttleTime(func, wait) {
          
          let prev = 0;
          return function () {
          
            let now = Date.now(); //获取当前时间戳
            if (now - prev > wait) {
           //滚动时的时间戳减去上次滚动的时间戳大于wait时触发func()
              func.call(this); //调用func时绑定this指向，确保this统一，避免出现bug
              prev = now; //每调用一次让prev的值等于当前的时间戳
            }
          };
        }
        window.onscroll = throttleTime(function () {
           //滚动条事件，滚动条有滚动就会触发
          console.log(123); 
        }, 1000);//触发后一秒后进行输出，多次触发按一次算
    
      </script>
    </body>
    
    </html>

### 区别： ###

简单理解，从上面代码中可以看出防抖在多次触发后只会执行最后一次点击事件而后进行输出，而节流在多次触发事件后在其规定的时间结束后立即执行的输出。

### 相同点 ###

从上面代码中可以看出防抖节流都需要两个很关键的参数，一个是闭包【用于事件发生时需要使用的内部变量】，另一个是定时器。