javascript 防抖和节流函数的使用

//资料来源：掘金
//把函数进行防抖处理，fn函数名，times：setTimeout的间隔时间
function fandou(fn, times) {
    
    //这里有闭包噢，在外面执行防抖后函数时访问到了fandou函数里面的变量
    let timeouter = null;
    
    //返回经过防抖处理后的fn函数，在这里接受函数的参数
    return function(...args) {
        //如果timeouter已经有了，就清理掉
        if(timeouter) clearTimeout(timeouter);
        
        //重新生成setTimeout
        timeouter = setTimeout(()=>{
            fn.apply(this, args);
        }, times);
    }
}

//需要进行防抖处理的干活函数
function pp(con,con2) {
    console.log(con + " : " + con2);    
}

//对干活函数pp进行防抖处理，得到已经具有防抖功能的函数fdpp, 第一个参数只要写pp这个函数名就行，不要(),不要实参
const fdpp = fandou(pp, 500);

//测试防抖函数，连续调用50次，如果是普通函数就会执行50次，但经过防抖处理后的函数只执行最后一次
for(let i=0;i<50;i++) {
    console.log(i);
    //实际参数在这里传进去，另外fdpp函数在执行时可以访问到fandou函数里面的timeouter变量，妥妥的闭包
    fdpp(i,'i am fandou');
}

//输出结果
//[Log] 46 (Untitled.js, line 29)
//[Log] 47 (Untitled.js, line 29)
//[Log] 48 (Untitled.js, line 29)
//[Log] 49 (Untitled.js, line 29)
//[Log] 49 : i am fandou (Untitled.js, line 21)


------------------------------------------------分割线----------------------------------------------------------


//把函数进行节流处理，fn函数名，times：setTimeout的间隔时间
function jieliu(fn, times=0) {
    
    //这里有闭包噢，在外面执行节流手术后的函数时访问到了jieliu函数里面的变量isYouarelate
    let isYouarelate = false;
    
    //返回经过节流手术处理后的fn函数，在这里接受干活函数的参数
    return function(...args) {
        //如果isYouarelate为true，说明来晚了，啥也别干了直接回家吧
        if(isYouarelate) return;
        
        //把门关上，防止别人再进来
        isYouarelate = true;

        setTimeout(()=>{
            
            //干活
            fn.apply(this, args);
            
            //干完活后再把门打开，方便下次再来
            isYouarelate = false;
        }, times);
    }
}

//需要进行节流手术处理的干活函数
function pp(con,con2) {
    console.log(con + " : " + con2);
}

//对干活函数pp进行节流手术处理，得到已经具有节流功能的函数jlpp, 第一个参数只要写pp这个函数名就行，不要(),不要实参
const jlpp = jieliu(pp);

//测试节流手术函数，连续调用50次，如果是普通函数就会执行50次，但经过节流手术处理后的函数只执行 第一 次
for(let i=0;i<50;i++) {
    console.log(i);
    jlpp(i,'i am jieliu');
}

//运行结果
//[Log] 46 (Untitled.js, line 36)
//[Log] 47 (Untitled.js, line 36)
//[Log] 48 (Untitled.js, line 36)
//[Log] 49 (Untitled.js, line 36)
//[Log] 0 : i am jieliu (Untitled.js, line 28)