防抖debounce的基本思路:
- 当持续触发事件(输入/点击等)一定时间内没有再触发事件事件处理函数才会执行一次。如果设定的时间到来之前又一次触发了事件就重新开始延时。只让最后一次生效,前面的不生效。
<button id='btn'>按钮</button>
<script type="text/javascript">
function debounce(fn, delay) {
var timer = null;
return function() {
clearTimeout(timer)
timer = setTimeout(function() {
fn.apply(this)
}, delay)
}
}
document.getElementById('btn').onclick = debounce(function() {
console.log('点击事件被触发' + Date.now())
}, 1000)
</script>
- 应用场景:
- 每次 resize/scroll 触发统计事件
- 文本输入的验证(连续输入文字后发送 AJAX 请求进行验证,验证一次就好)
节流的基本思路:
- 规定一个期限时间,在该时间内,触发事件的回调函数只能执行一次,如果期限时间内回调函数被多次触发,则只让第一次能生效。
- 函数的节流通过闭包保存一个标记,判断是否
function throttle(fn, delay) {
var lastTime = 0;
return function() {
var nowTime = Date.now();
if (nowTime - lastTime > delay) {
fn.call(this);
lastTime = nowTime;
}
}
}
document.onscroll = throttle(function() { console.log('scroll事件被触发了' + Date.now()) }, 200)
- 应用场景
- DOM 元素的拖拽功能实现(mousemove)
- 搜索联想(keyup)
- 计算鼠标移动的距离(mousemove)
- Canvas 模拟画板功能(mousemove)
- 射击游戏的 mousedown/keydown 事件(单位时间只能发射一颗子弹)
- 监听滚动事件判断是否到页面底部自动加载更多:给 scroll 加了 debounce 后,只有用户停止滚动后,才会判断是否到了页面底部;如果是 throttle 的话,只要页面滚动就会间隔一段时间判断一次。