- 相同点:防抖和节流的作用都是在高频事件中防止函数被多次调用。
- 不同点:防抖函数只会在高频事件结束后n秒调用一次函数,节流函数会在高频事件触发过程中每隔n秒调用一次函数。
应用场景
- 都是在使用高频事件来调用函数的过程时,例如:resize、scroll事件,拖拽时的mousemove事件,文字输入、自动完成的keyup事件。
封装防抖函数
- 定义:触发高频事件后单位时间内只执行一次函数,如果指定时间内高频事件再次被触发,则重新计算时间
- scroll事件滚动触发事件
- 搜索框输入查询,等用户停止输入时再调用方法,减轻服务端压力
- 表单验证
- 按钮提交事件
- 浏览器窗口缩放,resize(如窗口停止改变大小之后重新计算布局)等
function debounce(func, wait) {
let timeout = null;
return function() {
const ctx = this;
const args = arguments;
if (timeout) {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(ctx, args)
}, wait);
}
}
}
节流函数
- 定义:在单位时间内,只触发一次函数,如果单位事件内触发多次函数,只有一次生效
- DOM元素的拖拽功能实现(mousemove)
- 搜索联想(keyup)
- 计算鼠标移动的距离(mousemove)
- Canvas模拟画板功能
- 射击游戏的mousedown/keydown事件(单位时间只能发射一颗子弹)
- 监听滚动事件判断是否到页面底部自动加载更多
function throttle(func, wait) {
let timeout = null;
return function () {
const ctx = this;
const args = arguments;
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(ctx, args);
}, wait)
}
}
}