- 1. 节流介绍
- 2. 滚动加载-节流处理
1. 节流介绍
节流: n 秒内只运行一次，若在 n 秒内重复触发，只有第一次生效
节流的应用场景:
1. 滚动加载: 监听页面滚动到底部的时候触发 2. 拖拽场景: 固定时间只执行一次，防止高频率的位置变动
2. 滚动加载-节流处理
首先编写监听页面滚动距离的方法，当向下滑动时，可以看到控制台执行了很多次的输出，如果我们要根据页面滑动距离来计算代码逻辑，这样频繁的执行计算会非常损耗系统性能，我们可以使用节流来优化这个问题
代码语言：javascript复制<style>
body {
height: 2000px;
background: lightsalmon;
}
</style>
<script>
let count = 1
function scrollFn() {
console.log('监听页面滚动次数: ', count );
}
document.onscroll = scrollFn
</script>节流的实现思路:
1. 借助 setTimeout 定时器，控制事件回调是否执行 2. 获取每次事件执行的时间与上一次执行的时间差 3. 判断时间差是否已超过设定的时间间隔，超过时立即执行函数，没有超过时取消后续的定时器任务 4. 最后一次事件的触发，会执行完成
使用节流函数优化后的代码:
源码下载站
代码语言：javascript复制// 节流函数
function throttle(fn, time) {
// 上一次的执行时间
let pre = 0
let timeout = null
return function (...args) {
const now = Date.now()
// 时间差超过了设定的时间间隔
if (now - pre > time) {
pre = now
fn.apply(this, args)
} else {
// 没有超过设定的时间间隔,则后续的事件会直接清除
if (timeout) {
clearTimeout(timeout)
timeout = null
}
// 最后一次的事件会触发
timeout = setTimeout(() => {
pre = now
fn.apply(this, args)
}, time);
}
}
}
document.onscroll = throttle(scrollFn, 300)
