//資料來源：掘金
//把函數(shù)進(jìn)行防抖處理，fn函數(shù)名顽决，times：setTimeout的間隔時間
function fandou(fn, times) {
    
    //這里有閉包噢箫锤，在外面執(zhí)行防抖后函數(shù)時訪問到了fandou函數(shù)里面的變量
    let timeouter = null;
    
    //返回經(jīng)過防抖處理后的fn函數(shù)锌畸，在這里接受函數(shù)的參數(shù)
    return function(...args) {
        //如果timeouter已經(jīng)有了正罢，就清理掉
        if(timeouter) clearTimeout(timeouter);
        
        //重新生成setTimeout
        timeouter = setTimeout(()=>{
            fn.apply(this, args);
        }, times);
    }
}

//需要進(jìn)行防抖處理的干活函數(shù)
function pp(con,con2) {
    console.log(con + " : " + con2);    
}

//對干活函數(shù)pp進(jìn)行防抖處理琼娘，得到已經(jīng)具有防抖功能的函數(shù)fdpp, 第一個參數(shù)只要寫pp這個函數(shù)名就行嫁艇，不要(),不要實參
const fdpp = fandou(pp, 500);

//測試防抖函數(shù)，連續(xù)調(diào)用50次好渠，如果是普通函數(shù)就會執(zhí)行50次昨稼，但經(jīng)過防抖處理后的函數(shù)只執(zhí)行最后一次
for(let i=0;i<50;i++) {
    console.log(i);
    //實際參數(shù)在這里傳進(jìn)去，另外fdpp函數(shù)在執(zhí)行時可以訪問到fandou函數(shù)里面的timeouter變量拳锚，妥妥的閉包
    fdpp(i,'i am fandou');
}

//輸出結(jié)果
//[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)


------------------------------------------------分割線----------------------------------------------------------


//把函數(shù)進(jìn)行節(jié)流處理假栓，fn函數(shù)名，times：setTimeout的間隔時間
function jieliu(fn, times=0) {
    
    //這里有閉包噢霍掺，在外面執(zhí)行節(jié)流手術(shù)后的函數(shù)時訪問到了jieliu函數(shù)里面的變量isYouarelate
    let isYouarelate = false;
    
    //返回經(jīng)過節(jié)流手術(shù)處理后的fn函數(shù)匾荆，在這里接受干活函數(shù)的參數(shù)
    return function(...args) {
        //如果isYouarelate為true拌蜘，說明來晚了，啥也別干了直接回家吧
        if(isYouarelate) return;
        
        //把門關(guān)上牙丽，防止別人再進(jìn)來
        isYouarelate = true;

        setTimeout(()=>{
            
            //干活
            fn.apply(this, args);
            
            //干完活后再把門打開简卧，方便下次再來
            isYouarelate = false;
        }, times);
    }
}

//需要進(jìn)行節(jié)流手術(shù)處理的干活函數(shù)
function pp(con,con2) {
    console.log(con + " : " + con2);
}

//對干活函數(shù)pp進(jìn)行節(jié)流手術(shù)處理，得到已經(jīng)具有節(jié)流功能的函數(shù)jlpp, 第一個參數(shù)只要寫pp這個函數(shù)名就行烤芦，不要(),不要實參
const jlpp = jieliu(pp);

//測試節(jié)流手術(shù)函數(shù)贞滨，連續(xù)調(diào)用50次，如果是普通函數(shù)就會執(zhí)行50次拍棕，但經(jīng)過節(jié)流手術(shù)處理后的函數(shù)只執(zhí)行 第一 次
for(let i=0;i<50;i++) {
    console.log(i);
    jlpp(i,'i am jieliu');
}

//運(yùn)行結(jié)果
//[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)