手寫函數防抖節流

cod7ce 發布于2019-08-23 14:39 / 1160人閱讀

摘要：級事件普通滾動函數節流函數防抖普通滾動普通滾動函數節流判斷是否已空閑，如果在執行中，則直接函數節流函數防抖清除未執行的代碼，重置回初始化狀態函數防抖級事件事件監聽函數函數防抖函數節流方法一定時器實現方法二時間戳

DOM 0級事件

DOM 2級事件事件監聽

document.addEventListener("scroll", debounce(test, 300))

function test() {
    console.log("函數...")
}

函數防抖（debounce）

function debounce(fn, delay) {
    let timer;
    return function() {
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function() {
            fn.apply(context, args);
        }, delay);
    };
}

函數節流（throttle）

// 方法一：定時器實現
const throttle = function(fn,delay) {
  let timer = null
  return function() {
    const context = this
    let args = arguments
    if(!timer) {
      timer = setTimeout(() => {
        fn.apply(context,args) 
        clearTimeout(timer) 
        timer = null;
      },delay)
    }
  }
}

// 方法二：時間戳
const throttle2 = function(fn, delay) {
  let preTime = Date.now()

  return function() {
      const context = this
      let args = arguments
      let doTime = Date.now()
      if (doTime - preTime >= delay) {
          fn.apply(context, args)
          preTime = Date.now()
      }
  }
}

GPU云服務器云服務器 VUE防抖與節流函數節流 js函數節流防抖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100934.html

前端筆試之手寫代碼

摘要：扁平化嵌套數組實現描述將嵌套多層的數組展開平鋪成只有一層的數組。方法一知識點方法二知識點方法三知識點展開語法其它方法數組去重描述將數組中重復的元素過濾掉。對于函數防抖，門外有人頻繁敲門，門衛按最后一次敲門來決定是否開門。知識點發布訂閱模式 1. 扁平化嵌套數組/flat實現描述：將嵌套多層的數組展開平鋪成只有一層的數組。 let array = [1, [1, 2, 3], [1, ...

zhichangterry 2019-08-23 15:26 評論0 收藏0
前端優化 —— 函數的節流和防抖

摘要：文件為函數要傳入的參數返回事件處理函數添加事件監聽節流函數一般用于事件的情況較多，因為這些事件的觸發是連續性的，需要在一個時間間隔內只觸發一次。 showImg(https://segmentfault.com/img/remote/1460000018998747); 閱讀原文前言在前端開發當中我們經常會綁定一些事件觸發的某些程序執行，有時這些事件會連續觸發，如瀏覽器窗口 s...

ralap 2019-08-23 12:18 評論0 收藏0
防抖 - 理解，實踐與實現

摘要：本文主要討論防抖，鏡像文章節流理解，實踐與實現。分開討論防抖和節流，主要是為了讓一些還不太了解防抖節流的讀者能夠有針對性地，逐一掌握它們。防抖是什么結合上方案例，防抖可以理解為多次觸發事件后，事件處理函數只執行一次。為了完整閱讀體驗，歡迎移步到我的博客原文。防抖（去抖），以及節流（分流）在日常開發中可能用的不多，但在特定場景，卻十分有用。本文主要討論防抖，鏡像文章：節流 - 理解，...

yangrd 2019-08-26 12:20 評論0 收藏0
「中高級前端面試」JavaScript手寫代碼無敵秘籍

摘要：第一種直接調用避免在不必要的情況下使用，是一個危險的函數，他執行的代碼擁有著執行者的權利。來自于此外，實現需要考慮實例化后對原型鏈的影響。函數柯里化的主要作用和特點就是參數復用提前返回和延遲執行。手寫路徑導航實現一個new操作符實現一個JSON.stringify 實現一個JSON.parse 實現一個call或 apply 實現一個Function.bind 實現一個繼承實現一個J...

Zhuxy 2019-05-23 16:26 評論0 收藏0
帝都寒冬一年經驗前端面試總結

摘要：不過幸運的是所有面試的公司都給了，在這里總結下經驗吧。這里推薦下我當時看的一篇的面經，木易楊老師寫的大廠高級前端面試題匯總。前言本人畢業一年，最近陸續面試了頭條、瓜子、360、猿輔導、中信銀行、老虎等公司，由于最近比較寒冬而且招1-3年的并不多，再加上自己對公司規模和位置有一定要求，所以最后合適的也就這幾家了。不過幸運的是所有面試的公司都給了offer，在這里總結下經驗吧。掘金：h...

Scott 2019-08-26 10:24 評論0 收藏0