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)
},