快捷導(dǎo)航

如何在面試中手寫出javascript節(jié)流和防抖函數(shù)

更新時(shí)間：2020年10月22日 16:59:30 作者：酷兒q

這篇文章主要介紹了如何在面試中手寫出javascript節(jié)流和防抖函數(shù),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

面試的時(shí)候我們經(jīng)常會(huì)問別人是理解什么是節(jié)流和防抖，嚴(yán)格的可能要求你寫出節(jié)流和防抖函數(shù)，這里我們拋開loadsh工具庫手寫節(jié)流和防抖

1.節(jié)流函數(shù)throttle

// 節(jié)流方案1，每delay的時(shí)間執(zhí)行一次，通過開關(guān)控制
function throttle(fn, delay, ctx) {
  let isAvail = true
  return function () {
    let args = arguments // 開關(guān)打開時(shí)，執(zhí)行任務(wù) 
    if (isAvail) {
      fn.apply(ctx, args)
      isAvail = false // delay時(shí)間之后，任務(wù)開關(guān)打開 
      setTimeout(function () { isAvail = true }, delay)
    }
  }
}
// 節(jié)流方案2，通過計(jì)算開始和結(jié)束時(shí)間
function throttle(fn,delay){
      // 記錄上一次函數(shù)出發(fā)的時(shí)間
      var lastTime = 0
      return function(){
      // 記錄當(dāng)前函數(shù)觸發(fā)的時(shí)間
      var nowTime = new Date().getTime()
      // 當(dāng)當(dāng)前時(shí)間減去上一次執(zhí)行時(shí)間大于這個(gè)指定間隔時(shí)間才讓他觸發(fā)這個(gè)函數(shù)
      if(nowTime - lastTime > delay){
        // 綁定this指向
        fn.call(this)
        //同步時(shí)間
        lastTime = nowTime
      }
      }
    }

2.防抖debounceTail

2.1）只執(zhí)行首次

// 防抖 且首次執(zhí)行
// 采用原理：第一操作觸發(fā)，連續(xù)操作時(shí)，最后一次操作打開任務(wù)開關(guān)（并非執(zhí)行任務(wù)），任務(wù)將在下一次操作時(shí)觸發(fā)）
function debounceStart(fn, delay, ctx) {
  let immediate = true 
  let movement = null
  return function() {
    let args = arguments
    
    // 開關(guān)打開時(shí)，執(zhí)行任務(wù)
    if (immediate) {
      fn.apply(ctx, args)
      immediate = false
    }
    // 清空上一次操作
    clearTimeout(movement)
    
    // 任務(wù)開關(guān)打開
    movement = setTimeout(function() {
      immediate = true
    }, delay)
  }
}

2.2）只執(zhí)行最后一次

// 防抖 尾部執(zhí)行
// 采用原理：連續(xù)操作時(shí)，上次設(shè)置的setTimeout被clear掉
function debounceTail(fn, delay, ctx) {
  let movement = null
  return function() {
    let args = arguments
    
    // 清空上一次操作
    clearTimeout(movement)
    
    // delay時(shí)間之后，任務(wù)執(zhí)行
    movement = setTimeout(function() {
      fn.apply(ctx, args)
    }, delay)
  }
}

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: