debounce(handleCreateWebSocket,2*1000)()
每次触发这个点击事件,无法实现防抖效果,点击多少次,执行了多少次,为什么?
var btnCreateWebSocket = document.querySelector('.btn-create-webSocket-container')
if (btnCreateWebSocket) {
btnCreateWebSocket.onclick = function () {
console.log('btnCreateWebSocket')
// if(!chatGlobalData['connect']) {
clearTimeout(timerCreateWebSocket)
timerCreateWebSocket = setTimeout(function(){
createWebSocket()
}, 2*1000)
// }
}
}
防抖函数实现
function debounce (func, wait){
var timeout;
return function(){
var self = this; // 因为apply会改变this的指向性
clearTimeout(timeout)
timeout = setTimeout(function(){
// setTimeout 属于 window 对象
// 直接使用func.apply(this) 会在add函数里面改变this为window,
// 这里也可以用ES6的箭头函数
func.apply(self)
}, wait)
}
}
因为你写的timerCreateWebSocket是在函数内的,每次刷新都重新定义为undefined,而下方使用闭包,
timeout
变量的状态能保存。