js的防抖和节流

Dear 丶 2022-12-18 05:53 188阅读 0赞

写这篇文章主要用于自己以后查漏

**防抖和节流的共同点**：限制函数的执行频率，以优化函数触发频率过高而导致响应速度跟不上触发频率，出现延迟、假死、卡顿现象

**区别**：函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而防抖只是在最后一次事件触发后才执行一次事件处理函数

**1、防抖**：对于短时间内连续触发的事件（scroll,resize,click,,,,,）,在某个时间期限内，事件处理函数只执行一次，即将多次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发

**场景**：在第一次触发事件（比如click）时，不立即执行处理函数handler，而是给出一个期限delay，然后

1）在delay内，没有在触发事件click,那么就执行处理函数handler

2）若在delay内再次触发事件click，那么当前计时取消，重新计时

**效果**：短时间内大量触发同一事件click，只会执行一次处理函数handler

**缺点**：如果事件在规定时间内被不断触发，则处理函数handler则会被不断延迟

**实现方式**：每次事件触发时设置一个延迟调用方法，并且取消之前的延时调用方法---利用setTimeout和必包实现

<template>
      <div>
        <img alt="Vue logo" src="./assets/logo.png">
        
        <div class="btn" @click.stop.prevent="clickEvent">click</div>
      </div>
    </template>
    
    <script>
    // import HelloWorld from './components/HelloWorld.vue'
    
    export default {
      name: 'App',
      components: {
        // HelloWorld
      },
      data() {
        return {
          clickNum: 0,
          timer: null
        }
      },
      methods: {
        clickEvent() {
          this.debunce(this.handler, 2000)
        },
        debunce(handler, delay) {
          // handler需要防抖的函数，delay防抖期限值
          if (this.timer) {
            clearTimeout(this.timer)
          }
          this.timer = setTimeout(() => {
            handler.apply(this, arguments)
          }, delay)
        },
        handler() {
          this.clickNum += 1
          console.log('clickNum: ', this.clickNum)
        }
      }
    }
    </script>
    
    <style>
    html{
      font-size: 200px;
    }
    #app {
      font-size: 16px;
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
    }
    .btn{
      background: gray;
      color: yellow;
      width: 0.5rem;
      height: 0.5rem;
      text-align: center;
      line-height: 0.5rem;
      font-size: .13rem;
    }
    </style>

**2、节流**：一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行

<template>
      <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        
        <div class="btn" @click.stop.prevent="clickEvent">click</div>
      </div>
    </template>
    
    <script>
    // import HelloWorld from './components/HelloWorld.vue'
    
    export default {
      name: 'App',
      components: {
        // HelloWorld
      },
      data() {
        return {
          clickNum: 0,
          valid: true,
          timer: null
        }
      },
      methods: {
        clickEvent() {
          this.throttle(this.handler, 2000)
        },
        throttle(handler, delay) {
          // handler需要防抖的函数，delay防抖期限值
          if (!this.valid) {
            return false
          }
          this.valid = false
          this.timer = setTimeout(() => {
            clearTimeout(this.timer)
            this.valid = true
            handler.apply(this, arguments)
          }, delay)
        },
        handler() {
          this.clickNum += 1
          console.log('clickNum: ', this.clickNum)
        }
      }
    }
    </script>
    
    <style>
    html{
      font-size: 200px;
    }
    #app {
      font-size: 16px;
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
    }
    .btn{
      background: gray;
      color: yellow;
      width: 0.5rem;
      height: 0.5rem;
      text-align: center;
      line-height: 0.5rem
    }
    </style>