js防抖debounce和节流throttling详解
0、前言
防抖和节流对于我们前端的性能优化上来说是一个必不可少的部分,也是面试出现频率极高的问题。本文将从防抖节流概念开始,到具体实现的代码解析,一步一步讲述如何实现防抖节流。
1、防抖(debounce)
1.1 概念
所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
1.2 实现思路
思路:事件触发后开启一个定时器,如果事件在这个定时器限定的时间内再次触发,则清除定时器,在写一个定时器,定时时间到则触发。
function debounce(fn, t=500){
let timer;
return function(){
// 如果有定时器,先清除
if(timer) clearTimeout(timer);
// 开启定时器
timer = setTimeout(()=> {
fn.apply(this, arguments);
}, t)
}
}
2、节流(throttle)
2.1 概念
所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。
2.2 实现思路
思路:我们可以设计一种类似控制阀门一样定期开放的函数,事件触发时让函数执行一次,然后关闭这个阀门,过了一段时间后再将这个阀门打开,再次触发事件。
function throttle(fn, t=500) {
let startTime = 0;
return function() {
let now = Date.now();
if(now - startTime >= t) {
fn();
startTime = now;
}
}
}
3、总结
- 防抖和节流相同点:
防抖和节流都是为了阻止操作高频触发,从而浪费性能。
- 防抖和节流区别:
防抖是触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。适用于可以多次触发但触发只生效最后一次的场景。
节流是高频事件触发,但在n秒内只会执行一次,如果n秒内触发多次函数,只有一次生效,节流会稀释函数的执行频率。
- 使用场景
防抖: input框搜索联想词、登录、点击按钮提交表单…
节流: scroll滑动事件、resize浏览器窗口改变事件、mousemove鼠标移动事件、文档编辑隔一段时间自动保存…