实现代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>节流</title>
</head>
<body>
<button type="button">节流按钮</button>
<script type="text/javascript">
//创建执行函数
function add() {
console.log('啊哈哈')
}
//创建节流函数
function throttle(fn, delay) {
//定义一个开关变量
let flag = true
//使用闭包
return () => {
//判断条件
if(!flag) return
//如果执行就将开关给关闭
flag = false
timer = setTimeout(() => {
//延迟调用函数, 利用apply来绑定this
fn.apply(this)
flag = true
//执行完毕后将开关打开
}, delay)
}
}
//用变量接受执行方法
const ofangdou = throttle(add, 1000)
let btn = document.querySelector('button')
//添加点击事件
btn.addEventListener('click', ofangdou)
//这样多次点击, 还是会执行, 不会出现多次点击只会执行最后一次方法
</script>
</body>
</html>
这样如果多次点击, 也会隔一段时间执行