手寫函數(shù)防抖節(jié)流

cod7ce 發(fā)布于2019-08-23 14:39 / 1153人閱讀

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

DOM 0級事件




    
        
            普通滾動
            
        
        
            函數(shù)節(jié)流
            
        
        
            函數(shù)防抖

DOM 2級事件事件監(jiān)聽

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

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

函數(shù)防抖（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);
    };
}

函數(shù)節(jié)流（throttle）

// 方法一：定時器實現(xiàn)
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防抖與節(jié)流函數(shù)節(jié)流 js函數(shù)節(jié)流防抖

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/100934.html

前端筆試之手寫代碼

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

zhichangterry 2019-08-23 15:26 評論0 收藏0
前端優(yōu)化 —— 函數(shù)的節(jié)流和防抖

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

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

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

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

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

Zhuxy 2019-05-23 16:26 評論0 收藏0
帝都寒冬一年經(jīng)驗前端面試總結(jié)

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

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