实现节流防止连点方法以及调用方式

原创已于 2024-06-28 14:11:03 修改 · 424 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue #vue.js #uniapp

于 2024-03-22 16:04:14 首次发布

本文介绍了如何在Vue项目中创建并使用throttle.js函数，以实现按钮点击事件的防抖处理，防止短时间内连续触发多次请求，提高用户体验。

1、新建throttle.js文件，复制该代码

export function throttle(fn, delay) {
   let latestTime = 0
   return function() {
       const _this = this
       const _arguments = arguments
       const nowTime = new Date().getTime()

       if (nowTime - latestTime > delay) {
           fn.apply(_this, _arguments)
           latestTime = nowTime
       } else {
           this.$util.Tips({
               title: `点击次数过高，请${Math.ceil((delay - (nowTime - latestTime)) / 1000)}秒后再次尝试！`
           })
       }
   }

}

2.调用方式

vue文件中引入

import {throttle} from "路径"

两秒之后执行第二次，想要修改时间，直接改2000，他就是几秒后执行

btnFnc: throttle(function() {
this.antiShakeBtn()
}, 2000),

antiShakeBtn() {
此方法是处理接口或者逻辑等等
},