节流（throttle）
- 理解：
- 技能cd
- 概念：
- 当持续触发事件时，保证一定时间段内只调用一次事件处理函数。
- 应用场景：
- 鼠标不断点击触发，mousedown(单位时间内只触发一次)
- 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
- 代码：
const throttle = (func, time) => {
let timer = null
return function () {
if (timer) return
func.apply(this, arguments)
timer = setTimeout(() => {
timer = null
}, time)
}
}
throttleBtn.addEventListener('click', throttle(onThrottleBtnClick, 3000))
防抖（debounce）
- 理解：
- 回城被打断，只要被打断，就重新回城
- 计算机睡眠事件
- 概念：
- 延时执行。指触发事件后在规定时间内回调函数只能执行一次，如果在规定时间内又触发了该事件，则会重新开始算规定时间。
- 应用场景：
- search输入框搜索联想，用户在不断输入值时，用防抖来节约请求资源。
- 按钮点击:收藏,点赞,心标等
- window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
- 代码：
const debounce = (func, time) => {
let timer = null
return function () {
clearTimeout(timer)
timer = setTimeout(() => {
func.apply(this, arguments)
}, time)
}
}
debounceBtn.addEventListener('click', debounce(onDebounceBtnClick, 3000))