限制一个函数在一定时间内只能执行一次,比如,坐火车或地铁,过安检时在一定时间内只允许一个乘客通过安检入口,,以配合安检人员完成安检工作。可用于提交表单时防止卡顿导致用户多次提交、高频监听事件。
未使用函数节流
多次提交时
多次点击时运行结果
使用函数防抖时
多次点击时运行结果
实现代码
<body>
<h2>节流</h2>
<div id="box" style="background: blue; height: 200px; width: 200px">
</div>
<script>
//节流
let box = document.querySelector("#box")
console.log(box)
box.addEventListener("click",throttle(demo,2000))
function throttle(event,time){
let timer = null
return function(){
if(!timer){
timer = setTimeout(()=>{
event();
timer = null;
},time)
}
}
}
function demo(){
console.log("发送请求")
}
</script>
</body>