前端节流总结

1. 节流（throttle）简介
     场景：用户在一段时间频繁点击执行某个函数/事件，那么在这段时间，用户点击一次/多次（调用事件），都不会影响计时器执行，并且该函数/事件只执行一次。
     应用示例理解：技能冷却中，玩家在某种情况下使用了闪现这个技能，但是这个技能的冷却时间是120s,在这段时间里，玩家遇到危险，想要再使用闪现这个技能，频繁的点击它，但是并没用，闪现不会执行，计时器依然还在倒计时，等到120s倒计时为0才能再使用一次闪现的技能。

2.应用场景
   窗口调整
   页面滚动
   抢购和疯狂点击
   懒加载获取滚动条的位置
   鼠标连续不断地触发某事件（如点击），只在规定时间内触发一次
   ……

// ---------------------节流1:使用时间戳---------------------
//func 是事件处理程序，delay 是事件执行的延迟时间，单位：毫秒
function throttle (func, delay) {
    //定义初始时间(开始触发事件的时间)
    let start = 0;
    return function () {
        const that = this
        const args = arguments
        // 获取当前时间戳
        let cur =Date.now()
        // 时间间隔大于延迟时间则进入
        if (cur - start >= delay) {
            //执行事件处理程序
            func.apply(that, args);
            //更新初始时间
            start = cur
        }
    }
}


// ---------------------节流2:使用定时器---------------------
//func 是事件处理程序，delay 是事件执行的延迟时间，单位：毫秒
function throttle(func, delay){
    // 自定义一个定时器
    var timer = null;
    return function(){
        var that = this;
        var args = arguments
        // timer为null表示可以发送请求了，否则还在请求中，不执行事件
        if(!timer){
            timer = setTimeout(function(){
                //执行事件处理程序
                func.call(that, args)
                //事件执行完后把定时器清除掉，下次触发事件的时候再设置
                timer = null;
            }, delay)
        }  
    }
}

未调用节流函数时，每点击一次按钮，都会执行一次函数调用：

使用节流函数之后，频繁的点击发送请求，它会在计时器结束之后再发，这段时间内点击发送一次请求之后，不会再发送请求：

const button1Dom = document.getElementById('button1')
// ---------------------节流1:使用时间戳---------------------
//func 是事件处理程序，delay 是事件执行的延迟时间，单位：毫秒
function throttle (func, delay) {
    //定义初始时间(开始触发事件的时间)
    let start = 0;
    return function () {
        const that = this
        const args = arguments
        // 获取当前时间戳
        let cur =Date.now()
        // 时间间隔大于延迟时间则进入
        if (cur - start >= delay) {
            //执行事件处理程序
            func.apply(that, args);
            //更新初始时间
            start = cur
        }
    }
}
// ---------------------节流2:使用定时器---------------------
//func 是事件处理程序，delay 是事件执行的延迟时间，单位：毫秒
// function throttle(func, delay){
//     // 自定义一个定时器
//     var timer = null;
//     return function(){
//         var that = this;
//         var args = arguments
//         // timer为null表示可以发送请求了，否则还在请求中，不执行事件
//         if(!timer){
//             timer = setTimeout(function(){
//                 //执行事件处理程序
//                 func.call(that, args)
//                 //事件执行完后把定时器清除掉，下次触发事件的时候再设置
//                 timer = null;
//             }, delay)
//         }  
//     }
// }
button1Dom.addEventListener('click',throttle(function(){
    console.log("节流：我发送了消息")
},1000))

时间戳与计时器实现的区别

最明显的区别就是在频繁点击的时候，会发现使用时间戳实现的节流会在调用的时候马上执行，而使用计时器实现会在时间段结束时执行