提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

JS 性能优化之节流

JS性能 优化 节流
2023-06-13 09:15:40 时间

1. 节流介绍

节流: n 秒内只运行一次，若在 n 秒内重复触发，只有第一次生效

节流的应用场景:

1. 滚动加载: 监听页面滚动到底部的时候触发 2. 拖拽场景: 固定时间只执行一次，防止高频率的位置变动

2. 滚动加载-节流处理

首先编写监听页面滚动距离的方法，当向下滑动时，可以看到控制台执行了很多次的输出，如果我们要根据页面滑动距离来计算代码逻辑，这样频繁的执行计算会非常损耗系统性能，我们可以使用节流来优化这个问题

<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. 最后一次事件的触发，会执行完成

使用节流函数优化后的代码:

源码下载站

// 节流函数
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)

相关文章