偶然间在工作中遇到了可能会出现用户频繁点击组件的问题
emm,你说不可能?谁会闲的那么蛋疼?
林子大了,什么鸟都有
更何况
好了不瞎扯了,步入正题
对于这类问题,一般都是在会涉及到网络请求或者计数的时候,才会有这个需求,禁止用户频繁的连续点击
var oldTime = 0
function throttling(fun, time) {
let that = this
return function() {
let newTime = new Date().getTime()
if (newTime - oldTime > time) {
fun(x, y)
oldTime = newTime
}
}()
}
function add(x, y) {
return x + y + 1
}
xxx.onclick = throttling(add, 1000)
上述代码中,对于需要执行的函数add,若是需要传入参数的时候,切记在函数throttling中调用的时候再进行传参,
对于实际调用 xxx.click = throttling(add, 1000)中的add只能是函数名,是不可带括号以及传参的
然后返回的匿名函数需要是一个自执行函数,否则内部的代码不会执行
2. 另一种简易的节流方式
全局声明:
let flag = true
然后在需要节流的地方这样写即可:
if(flag) { clearTimeout(t) flag = false // 需要执行的代码 var t = setTimeout(() => { flag = true }, 1000) }
以上,仅供遗忘之际复习以及参考用