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)