vue中使用节流,实现一个按钮在3s内不能重复触发点击事件

4 篇文章 0 订阅

vue中使用节流,实现一个按钮在3s内不能重复触发点击事件
1.先在data中定义上次点击的时间:lastTime:0。
2.触发点击事件:

userText (e) {
      let that = this
      // 设置定时器
      let timer
      // 设置现在的时间
      let now = +new Date()
      // 当现在的时间减去上次点击的时间小于3s时,给出提示,并结束执行函数
      if (that.lastTime && now - that.lastTime < 3000) {
        clearTimeout(timer)
        this.$message({
          message: '发送频率太快,请您稍后再试!',
          type: 'warning'
        })
        return
      } else {
      	// 若大于3s,则把现在的时间赋值个lastTime
        that.lastTime = now
      }
      timer = setTimeout(function () {
        e.target.blur()
        if (that.user.text.replace(/\s/g, '').length === 0) {
          that.user.text = ''
          return false
        }
        let words = that.$filterWord(that.user.text.trim())
        if (words.indexOf('*') !== -1) {
          that.$message({
            message: '您输入的内容包含敏感信息!',
            type: 'warning'
          })
        }
        that.setText(that.user.text.trim(), true)
        that.getAn(that.user.text)
        that.user.tip = null
        that.user.text = ''
        // 每次点击按钮都要把最新的时间赋值给lastTime
        that.lastTime = +new Date()
      }, 200)
    },
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值