应用场景
防抖和节流都是用来防止高频率的js代码的执行
防抖
- 防抖本质上就是以最后的操作为标准
打个比方,此时此刻我们都在排队等公交,司机说必须等到坐满才会发车,这时候的参照标准就是最后一个人上车,公交车好比我们的js代码,最后一个人就充当我们的执行条件。
看代码:
let setTimer;
let shake = function() {
clearTimeout(setTimer);
setTimer = setTimeout(() => {
console.log("这里是实际的业务代码");
}, 0);
};
let interTimer = setInterval(() => {
shake();
}, 0);
let timer = setTimeout(() => {
clearInterval(interTimer);
clearTimeout(timer);
timer = null;
interTimer = null;
}, 2000);
执行以上代码,控制台会在 2s 后打出日志,2s 之内的操作都被清空,以最后一次的操作为准。
如果你在监听滚动事件,假设两秒以内用户在不断的平凡的触发onScroll事件,只有用户暂停滚动后,才会去执行响应的操作,代码如下
// 函数防抖
var timer = false;
document.getElementById("xxxx").onscroll = function(){
clearTimeout(timer); // 清除未执行的代码,重置回初始化状态
timer = setTimeout(function(){
console.log("函数防抖");
}, 300);
};
节流
- 定时器实现节流
let isAllow = true;
function shake() {
let fun = function() {
if (!isAllow) return;
isAllow = false;
let timer = setTimeout(() => {
console.log("这里是实际的业务代码");
clearTimeout(timer);
timer = null;
isAllow = true;
}, 1000);
};
fun();
}
let interTimer = setInterval(() => {
shake();
}, 0);
执行以上代码你讲会看到控制台每隔 1s 后打印出结果,1s 内不会执行打印日志
- 闭包实现函数节流:
// fn是我们需要包装的事件回调, interval是时间间隔的阈值
function throttle(fn, interval) {
let last = 0; // last为上一次触发回调的时间
// 将throttle处理结果当作函数返回
return function() {
let context = this; // 保留调用时的this上下文
let args = arguments; // 保留调用时传入的参数
let now = +new Date(); // 记录本次触发回调的时间
// 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
if (now - last >= interval) {
// 如果时间间隔大于我们设定的时间间隔阈值,则执行回调
last = now;
fn.apply(context, args);
}
};
}
// 用throttle来包装scroll的回调
const better_scroll = throttle(() => console.log("触发了滚动事件"), 1000);
setInterval(() => better_scroll(), 0);
其它前端性能优化:
- 图片优化——质量与性能的博弈
- 浏览器缓存机制介绍与缓存策略剖析
- webpack 性能调优与 Gzip 原理
- 本地存储——从 Cookie 到 Web Storage、IndexDB
- CDN 的缓存与回源机制解析
- 服务端渲染的探索与实践
- 解锁浏览器背后的运行机制
- DOM 优化原理与基本实践
- Event Loop 与异步更新策略
- 回流(Reflow)与重绘(Repaint)
- Lazy-Load
- 事件的节流(throttle)与防抖(debounce
- 前端学习资料下载
- 技术体系分类
前端技术架构体系(没有链接的后续跟进):
- 调用堆栈
- 作用域闭包
- this全面解析
- 深浅拷贝的原理
- 原型prototype
- 事件机制、
- Event Loop
- Promise机制、
- async / await原理、
- 防抖/节流原理
- 模块化详解、
- es6重难点、
- 浏览器熏染原理、
- webpack配置(原理)
- 前端监控、
- 跨域和安全、
- 性能优化(参见上面性能优化相关)
- VirtualDom原理、
- Diff算法、
- 数据的双向绑定
- [TCP协议(三次握手、四次挥手)](https://blog.csdn.net/woleigequshawanyier/article/details/85223642
- DNS域名解析
其它相关
欢迎各位看官的批评和指正,共同学习和成长
希望该文章对您有帮助,你的 支持和鼓励会是我持续的动力