js防抖和节流

1. 函数防抖: 规定函数至少间隔多久执行

案例(以输入框的防抖为例)

<div>
    <input @input="input">
  </div>

 methods: {
    input(e) {
      if (this.timeOutId) clearTimeout(this.timeOutId)
      this.timeOutId = setTimeout(() => {
        console.log(e.target.value)
      }, 800)
    }
  }

在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
函数执行过一次后,在n秒内不能再次执行,否则推迟函数执行
下一次函数调用将清除上一次的定时器,并用setTimeout重新计时

第二种方法: 以el-input输入框为例

<el-input v-model="input.value" placeholder="防抖测试" />
 data() {
    return {
      timeOutId: '',
      input: {
        value: ''
      },
    }
  },
  watch: {
    'input.value': {
      // 这里顺便展示嵌套的数据监听怎么写
      handler(val) {
        function aaa() {
          console.log(val)
        }
        this.debounce(aaa, 1000)
      }
    }
  },
  methods: {
   // 防抖方法:
    debounce(fn, time) {
      if (this.timeOutId) clearTimeout(this.timeOutId)
      this.timeOutId = setTimeout(fn, time)
    },
  }

2.函数节流:  限制一个函数在一定时间内只能执行一次

案例(以按钮点击为例)

<div>
    <el-button type="primary" @click="btn">节流按钮</el-button>
  </div>

<script>
export default {
  data() {
    return {
      stopFlag: false
    }
  },
  methods: {
     btn() {
      if (this.stopFlag) {
        // 先判断如果是 真 就return 中断后面的代码
        // if没有作用域   所以这里成立后return会影响到外面函数的代码不再执行    
        return false 
      }
        // 上面判断不成立就走这里 变为真
      this.stopFlag = true 
      setTimeout(() => {
        // 然后继续走到这里的定时器(因为此时为真 循环每次在上面的判断时都会终止 所以在再次转为假时需要定时器执行完,这样就实现了节流效果)
        this.stopFlag = false // 到时间后再次转为假
      }, 2000)
      console.log('点击了按钮') // 做节流操作
    }
}
</script>
  • 7
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值