函數節流 是指一定時間內方法只跑一次。函數防抖 是指頻繁觸發的情況下，只有足夠的空閑時間，才執行代碼一次兩者都是優化高頻率執行js代碼的一種手段

情景一

用戶填寫一個表單，填寫完成后要點擊提交，由于各種原因導致用戶多點了幾次，導致同樣的數據重復；另一種情景，注冊時郵箱的輸入框，隨著用戶的輸入，實時判斷郵箱格式是否正確。此時，每一次的用戶輸入都觸發郵箱格式檢測事件，造成了浪費，于是設置兩次輸入之間的時間間隔大于800ms時（用戶結束輸入時），再執行檢查郵箱格式。

針對針對上面，情況有一下集中解決方案

1. 提交時，對于同一用戶，請求只有一個，之前的請求在沒返回之前，后面請求都默默的失敗，或提醒用戶重復提交，這種要求請求的實例時唯一的，負責無法判斷
2. 當用戶點擊按鈕時，將按鈕設為不可操作狀態，防止用戶多次點擊。大多數情況下都可以，但個別情況下，用戶有可能都不知道自己快速連續點擊或鼠標自身除了問題，導致重復
3. 使用延時，防止用戶短時間內重復操作，這種主要針對的是連續輸入，延時請求

// 函數防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
    clearTimeout(timer); // 清除未執行的代碼，重置回初始化狀態

    timer = setTimeout(function(){
        console.log("函數防抖");
    }, 300);
};  

我所使用的是第一種方案，原因有兩點，一，一般請求使用的請求實例都是唯一的，個別需要自己進行new 操作，二，屏蔽操作按鈕并設置后還得設置回來，有些麻煩，在加上并不能絕對有效的屏蔽重復操作

情景二

一個加載新聞的列表頁，只要滾動到頁面的最下面就繼續加載一部分新聞出來，即滾動加載。聊天的歷史記錄也是下啦加載，列表數據過多，上拉分批加載，在上次加載數據還沒完成之前，頻繁上拉或下拉加載數據，導致數據請求過多，界面有坑能卡死

• 針對以上情景，可以等待上一次加載完成后再進行加載

var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 判斷是否已空閑，如果在執行中，則直接return
        return;
    }

    canRun = false;
    setTimeout(function(){
        console.log("函數節流");
        canRun = true;
    }, 300);
};

由于滾動事件非常頻繁，稍微滾動一下就會觸發許多次，如果頻繁觸發的滾動，每一次都去檢查是否到頁面底部了再次造成了浪費。于是設置一個開關，一次只能有一個觸發執行，并對執行設置計時一段時間再執行，執行完畢之后再解鎖