【Vue】VUE 防抖与节流

防抖原理

产生原因:当持续触发某事件时,一定时间间隔内没有再触发事件时,事件处理函数才会执行一次,如果设定的时间间隔到来之前,又一次触发了事件,就重新开始延时。简单来说就是对点击事件做了一个延时处理。

防抖JS实现方法

防抖主要运用的是闭包原理,触发点击事件,调用debounce方法,传入参数为需要防抖的方法和延时时间,retrun返回一个方法,settime时间到再触发 .call(this, arges)执行方法。

	 // 防抖函数
    // 参数1:触发的方法
    // 参数2:等待时间
    function debounce(fun, time) {
      let timer
      return (arges) => {
        clearInterval(timer)
        timer = setTimeout(() => {
          // 触发该方法
          fun.call(this, arges)
        }, time)
      }
    },
    // 点击事件
    onClick() {
      let setTimeMsg = this.debounce(this.getMsg(), 500)
      setTimeMsg("参数可选,如果是axios请求,直接触发axois方法")
    },
    // 请求
    getMsg(arges) {
      getResource(1).then(response => {
      })
    },

VUE防抖组建

<template>
  <div>
    <Button :type="btn_type" @click="onClickDebounce">btn_txt</Button>
  </div>
</template>

<script>
export default {
  props: {
    // 按钮显示文字
    btn_txt: {
      type: String,
      default: ''
    },
    // 防抖时间
    debounce_timeout: {
      type: Number,
      default: 500
    },
    // 按钮type
    btn_type: {
      type: String,
      default: 'primary'
    }
  },
  methods: {
    // 防抖 闭包返回方法
    onClickDebounce() {
      let timer
      if (timer !== null) clearInterval(timer)
      timer = setTimeout(() => {
        // 触发父组建的点击事件
        this.$emit('on-click')
      }, this.debounce_timeout)
    }
  }
}
</script>

<style scoped>

</style>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小鱼小鱼啊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值