JS 性能优化之节流

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)