概念：函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。1、函数防抖(debounce)实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法缺点：如果
在前端开发中有一部分用户行为会频繁的触发事件执行，而对于DOM的操作、资源加载等耗费性能的处理，很可能会导致界面卡顿，甚至浏览器奔溃。函数的节流与防抖就是为了解决类似需求而产生的。
1）节流
概念：函数的节流就是预定一个函数只有在大于等于执行周期时才会执行，周期内调用不会执行。好像一滴水只有积攒到一定重量才会落下一样。
场景：窗口调整(resize)、页面滚动(scroll)、抢购疯狂点击(movedown)
1.1）案例(限时抢购)
我写了这样一个简单的事件，如下
<button id='show'>抢购</button>
<div id="box">0</div>
JS:1 let oBtn=document.getElementById('show')
let oBox=document.getElementById('box')
oBtn.onclick=function(){
oBox.innerText=parseInt(oBox.innerText)+1
}
当我点击时，每点击一次，数量增加一，点击越快，增加越快，效果图如下：
86
5万+
4504
1262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
最低0.47元/天 解锁文章
