函数防抖和节流是优化高频率执行js代码的一种手段,js中的一些事件如浏览器的
resize、scroll
,鼠标的mousemove、mouseover,input
输入框的keypress
等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能。为了优化体验,需要对这类事件进行调用次数的限制。
1.防抖 (debounce)
防止抖动,以免把一次事件误执行多次,影响性能,比如敲键盘就是一个每天都会接触到的防抖操作。
应用场景
- 登录、发短信等按钮避免用户点击太快,以致于发送了多次请求,需要防抖
- 调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到位,就用到了防抖
- 文本编辑器实时保存,当无任何更改操作一秒后进行保存
mousemove、mouseover
鼠标移动事件防抖- 搜索框搜索输入。只需用户最后一次输入完,再发送请求防抖
- 手机号、邮箱验证输入检测
举例:onmousemove
事件
在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
初步实现防抖函数debounce
代码如下:
function debounce(fn, delay) {
let timer; // 维护一个 timer
return function () {
let args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(()=> {
fn.apply(this, args); // 用apply指向调用debounce的对象,相当于this.fn(args);
}