防抖和节流

原创已于 2023-02-08 17:36:40 修改

· 124 阅读

1 ·

版权

文章标签：

#javascript

于 2023-02-08 17:26:53 首次发布

vue 专栏收录该内容

7 篇文章

订阅专栏

文章通过示例展示了JavaScript中防抖(debounce)和节流(throttle)函数的实现，用于优化频繁触发的事件处理，例如在UI更新或性能优化中。防抖函数确保在设定的时间内不再触发后执行，而节流函数则保证在设定时间内只执行一次。在Vue.js组件中应用了这两个概念，分别用于控制按钮点击事件更新变量的频率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

防抖：在 n 秒后执行该事件，如果在 n 秒内又触发了事件，则会重新计算执行时间

 //防抖
     debounce(fn,delay){
    let timer = null;
    return function(){
    if(timer){
      clearTimeout(timer)
    }
    timer = setTimeout(fn,delay)
  }
},

节流: 在n秒内只执行一次

//节流   fn指需要调用的方法  delay指 定时时间(ms)
 throttle(fn,delay){
            let valid = true;
            return function(){
                if(valid){
                valid = false;
                setTimeout(() =>{
                    valid = true
                },delay)
                return fn()
                }
            }  
        },

使用、

//应用
<template>
   <div>
       <el-card class="card1">
           <div class="layout">
       <div style="margin-right:20px">防抖:</div>
        <el-button type="primary" @click="dBtn1()">防抖按钮</el-button>
        <h3 style="margin-left:20px">{{num1}}</h3>
        </div>
        </el-card>


     <el-card class="card2">
           <div class="layout">
       <div style="margin-right:20px">节流:</div>
        <el-button type="success" @click="dBtn2()">节流按钮</el-button>
        <h3 style="margin-left:20px">{{num2}}</h3>
        </div>
        </el-card>

   </div>
</template>

<script>
export default {
  data () {
    return {
        num1:0,
        num2:0,
  };
},
 created(){
     //防抖
     this.dBtn1=this.debounce(this.btn1,1000)

     //节流
     this.dBtn2=this.throttle(this.btn2,2000)
 },

 methods:{
     //防抖
        debounce(fn,delay){
            let timer = null;
            return function(){
            if(timer){
            clearTimeout(timer)
            }
            timer = setTimeout(fn,delay)
        }
        },

        btn1(){
            this.num1++
            console.log("防抖哦~");
            console.log(this.num1);
        },


        //节流
        throttle(fn,delay){
            let valid = true;
            return function(){
                if(valid){
                valid = false;
                setTimeout(() =>{
                    valid = true
                },delay)
                return fn()
                }
            }  
        },

        btn2(){
            this.num2++
            console.log("节流哦~");
            console.log(this.num2);
        },

 }

}

</script>

<style scoped>
    .card1{
        margin: 20px;
    }
     .card2{
        margin: 20px;
    }
    .layout{
        padding: 10px;
        display: flex;
        align-items: center;
    }
</style>