JavaScript-节流函数的实现

1、对节流函数该怎么理解

日常小案例：

老师在上完课后给大家【五分钟】询问大家有没有什么问题要问

但是在【五分钟】之内，不管有多少同学 来问问题，都只会【解答一个问题】

如果在解答一个问题后，5分钟过后还没有同学问问题，那么就下课

所以用三句话理解就是：

1. 当事件触发时，会触发这个事件的响应函数
2. 当事件密集触发时，节流函数会按照一定的频率来执行函数
3. 不管在这个中间有多少次触发这个事件，执行函数的频率总是固定的

2、拙劣的图解

3、 节流的应用场景

• 监听页面的滚动事件
• 鼠标的移动事件
• 用户频繁点击按钮操作

4、节流的简单实现

//简单实现
function throttle(fn, interval) {
    //1.记录上一次的开始时间
    let lastTime = 0

    //2.事件触发时，真正的执行函数
    const _throttle = function (...args) {

        //2.1 获取当前事件触发时的时间
        const nowTime = new Date().getTime()

        //2.2 使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
        const remainTime = interval - (nowTime - lastTime)
        if (remainTime <= 0) {
            //2.3 真正触发函数
            fn.apply(this, args)
            //2.4 保留上次触发的时间
            lastTime = nowTime
        }
    }
    return _throttle
}

5、增加功能-第一次是否立即执行