防抖封装函数及引用讲解

m0_71331177

已于 2023-09-28 10:43:27 修改

阅读量103

点赞数

分类专栏：前端_常用封装文章标签： javascript typescript 开发语言 vue.js 前端

于 2023-06-30 14:36:45 首次发布

本文链接：https://blog.csdn.net/m0_71331177/article/details/131476257

版权

前端_常用封装专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue2项目中使用防抖函数(debounce)来优化事件处理，特别是在频繁触发的场景下，如按钮点击。通过创建一个debounce函数，接收that、执行函数fun和等待时间wait作为参数，确保函数在设定的时间间隔内只执行一次。在Test.vue组件中，将debounce应用到textFunDebounce方法，以此来调用需要防抖的textFun方法，避免在短时间内多次执行。

摘要由CSDN通过智能技术生成

// 节流
export const debounce = (that, fun, wait) => {
  if (that.timer) { 
    clearTimeout(that.timer); 
  }
  that.timer = setTimeout(() => {
    fun();
  }, wait);
}

具体使用 -- VUE2环境下

<script>
    //注意，这里模拟的是VUE文件的环境状态下，按步骤直接套用即可
    //外部JS文件 public.js
    // export const debounce = (that, fun, wait) => {
    // if (that.timer) { clearTimeout(that.timer); }
    // that.timer = setTimeout(() => {
    // fun();
    // }, wait);
    // }
    //由于此处用的是箭头函数，所以内部不能用this，通过外部传入解决，参数为that
    //fun,为传入函数
    //wait,为时间
    </script>

<!-- Test.vue -->
    <template>
    <!-- 此处模拟vue的渲染区,@click调用防抖后函数 -->
    <div class="operate">
        <el-button type="success" @click="textFunDebounce">Enter  确定</el-button>
</div>
</template>
<script>
            import { debounce } from "@/src/util/public";
export default {
    methods: {
        //调用防抖
        textFunDebounce() {
            //第一个this，为参数that的实际传参，解决指向问题
            //this.textFun为传入函数，由于此函数需要传参，所以后面使用 .bind(this,参数) 进行 —— 此项请各自查资料
            //300，为防抖时间
            debounce(this,this.textFun.bind(this,"我是传参page"),300)
        },
        //需要防抖的函数
        textFun(page) {
            console.log("延迟成功", page);
        }
    }
}
</script>