js的函數防抖與事件節流

函數節流 是指一定時間內方法只跑一次。函數防抖 是指頻繁觸發的情況下,只有足夠的空閑時間,才執行代碼一次兩者都是優化高頻率執行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);
};

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

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容