防抖函数与节流函数的实现【JavaScript】

防抖函数

多次触发事件，事件处理函数只能执行一次，并且是在触发操作结束时执行。也就是说，当一个事件被触发准备执行事件函数前，会等待一定时间（这个时间是自己定义的，比如1s），如果没有再次被触发，那么执行，如果被触发了，那就本次作废，重新触发的时间开始计算，并再次等待1秒，直到最终执行。

使用场景:搜索框搜索输入，并在输入完成以后自动搜索，手机号，邮箱的验证检测，窗口resize变化后的重新渲染。

function debounce( fn , delay ) {
    let  timeout = null;
    return function(...args) {
        if(timeout) {
            clearTimeout(timeout)
            timeout = null
        }else{ // 第一次输入立即执行

        }
        timeout = setTimeout(() =>{
            fn.apply(this,args)
        }, delay)
    }
}

节流函数

节流: 事件触发之后，规定时间内，处理函数不能再次被调用。也就是说在规定时间内函数只能调用一次，且是最先被触发调用的那次

使用场景： 滚动加载更多、搜索框的索联想功能、高频点击、表单重复提交

实现一

function throttle_Date(fn, delay) {
    // 记录上次执行的时间
    var lastTime = 0;
    return function(...args) {
        // 记录当前函数触发的
        var nowTime = Date.now();
        if(nowTime - lastTime > delay){
            // 修正this指向问题
            fn.call(this);
            // 同步执行同步时间
            lastTime = nowTime;
        }
    }
}

实现二

function throttle_setTimeout(fn, delay) {
    let timeout;
    return function() {
        if(timeout) {
            return
        }else {//第一次进入可以做一些事情
        }
        timeout = setTimeout( function() {
            fn.apply(this,args)
            timeout = null
        },delay) 
    }
}