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

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

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

DOM 0級(jí)事件




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

DOM 2級(jí)事件事件監(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）

// 方法一：定時(shí)器實(shí)現(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)
    }
  }
}

// 方法二：時(shí)間戳
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()
      }
  }
}

云服務(wù)器 GPU云服務(wù)器 VUE防抖與節(jié)流函數(shù)節(jié)流 js函數(shù)節(jié)流防抖

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/100934.html

相關(guān)文章

前端筆試之手寫代碼

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

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

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

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

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

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

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

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

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

Scott 2019-08-26 10:24 評(píng)論0 收藏0