一個垃圾前端為了面試準備的系列篇一：防抖和節流
防抖和節流其主要的都是為了限制某些事件頻繁執行，從而避免頻繁執行導致的異常（延遲，卡頓，假死等）問題

防抖

什麼是防抖

簡單的理解為短時間內頻繁觸發，只執行最後那一次，就是前面的來不及操作了，那就算了，不管了，最後執行那次就可以了

var timers;
/**
 * 防抖函式
 * 多次呼叫，只在規定時間段內執行一次
 * @param {*} str 
 * @param {*} fuc 
 * @param {*} times 
 */
const debounce=function(fuc,times){
    clearTimeout(timers)
    let _this =this
    let args = arguments
    timers=setTimeout(function(){
        // fuc(str)
        fuc.apply(_this,args)
    },times)
}
 

節流

什麼是節流

節流其實可以理解為：頻繁呼叫，減少頻率過高帶來的執行次數，相當於就是控制短時間內的執行次數，及在一段時間內執行一次

/**
 * 節流函式
 * 多次呼叫，只在規定時間段內執行一次
 * @param {*傳入的方法fuc的引數} str 
 * @param {*執行的方法} fuc 
 * @param {*執行的事件} times 
 */
var isOptions=true
const throttle=function(fuc,times){
    if(!isOptions){
        return
    } 
    const _this = this
    let args = arguments
    isOptions=false
    setTimeout(function(){
        // fuc(str)
        fuc.apply(_this,args) 
        // console.log('cdc')
        isOptions=true
    },times)
}
 

關於上述兩個方法的呼叫，目前我寫的使用場景是頁面滾動的時候列印不同的文字檢視效果和區分

const scrolls=function(str){
    console.log(str)
}
document.addEventListener('scroll',function(){
    console.log("正常滾動執行情況")
    throttle('節流',scrolls,2000) 
    debounce(function(){
        scrolls('防抖')
    } ,2000)
})
// ps：其中包含了兩種函式的呼叫，一種傳參通過單獨傳值的方式，另一種通過匿名函式的方式傳入
 

防抖和節流的圖解

執行效果

所以總的來說，都是可以在高頻度的情況下，減低關鍵程式碼的執行頻率，從而減低一些由於高頻引發的異常