js 手写防抖、节流函数

防抖

在第一次触发事件时，不立即执行函数，而是给出一个期限值，比如200ms

• 如果在200ms内没有再次触发滚动事件，那么就执行函
• 如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时

function debounce(fn,delay){
    let timer = null
    return function() {
        if(timer){
            clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
        }
        timer = setTimeout(fn,delay) // 计时
    }
}

节流

连续触发事件但是在 n 秒中只执行一次函数，节流会稀释函数的执行频率。
方法一：该实现方式是通过使用setTimeout实现的，所以第一次不会立即调用回调函数。

function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           //休息时间 暂不接客
           return false 
       }
       // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}

方法二：使用时间戳的形式实现节流函数，一旦触发该方法，回调函数会立即先调用一次。

function throttle(fn, delay) => {
    let pre = 0;
    return function(){
        let cur = new Date();
        if(cur - pre > delay){
            fn();
            pre = new Date();  
        }    
    }
}