摘要：相反，在討論時(shí)，面試中通常會(huì)提到三件事。而認(rèn)為最后一個(gè)參賽者說(shuō)了算，只要還能吃的，就重新設(shè)定新的定時(shí)器。試想，如果用戶的操作十分頻繁他每次都不等設(shè)置的時(shí)間結(jié)束就進(jìn)行下一次操作，于是每次都為該用戶重新生成定時(shí)器，回調(diào)函數(shù)被延遲了不計(jì)其數(shù)次。

本文不是討論最新的 JavaScript 庫(kù)、常見(jiàn)的開(kāi)發(fā)實(shí)踐或任何新的 ES6 函數(shù)。相反，在討論 JavaScript 時(shí)，面試中通常會(huì)提到三件事。我自己也被問(wèn)到這些問(wèn)題，我的朋友們告訴我他們也被問(wèn)到這些問(wèn)題。

然而，這些并不是你在面試之前應(yīng)該學(xué)習(xí)的唯一三件事 - 你可以通過(guò)多種方式更好地為即將到來(lái)的面試做準(zhǔn)備 - 但面試官可能會(huì)問(wèn)到下面是三個(gè)問(wèn)題，來(lái)判斷你對(duì) JavaScript 語(yǔ)言的理解和 DOM 的掌握程度。

讓我們開(kāi)始吧！注意，我們將在下面的示例中使用原生的 JavaScript，因?yàn)槊嬖嚬偻ǔＯＭ私饽阍跊](méi)有 jQuery 等庫(kù)的幫助下對(duì)JavaScript 和 DOM 的理解程度。

想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！

在構(gòu)建應(yīng)用程序時(shí)，有時(shí)需要將事件綁定到頁(yè)面上的按鈕、文本或圖像，以便在用戶與元素交互時(shí)執(zhí)行某些操作。

如果我們以一個(gè)簡(jiǎn)單的待辦事項(xiàng)列表為例，面試官可能會(huì)告訴你，當(dāng)用戶點(diǎn)擊列表中的一個(gè)列表項(xiàng)時(shí)執(zhí)行某些操作。他們希望你用 JavaScript 實(shí)現(xiàn)這個(gè)功能，假設(shè)有如下 HTML 代碼:

  
Walk the dog
  
Pay bills
  
Make dinner
  
Code for one hour

你可能想要做如下操作來(lái)將事件綁定到元素:

document.addEventListener("DOMContentLoaded", function() {
  let app = document.getElementById("todo-app");
  let itimes = app.getElementsByClassName("item");

  for (let item of items) {
    item.addEventListener("click", function(){
      alert("you clicked on item: " + item.innerHTML);
    })
  }
})

雖然這在技術(shù)上是可行的，但問(wèn)題是要將事件分別綁定到每個(gè)項(xiàng)。這對(duì)于目前 4 個(gè)元素來(lái)說(shuō)，沒(méi)什么大問(wèn)題，但是如果在待辦事項(xiàng)列表中添加了 10,000 項(xiàng)(他們可能有很多事情要做)怎么辦");

在面試中，最好先問(wèn)面試官用戶可以輸入的最大元素?cái)?shù)量是多少。例如，如果它不超過(guò) 10，那么上面的代碼就可以很好地工作。但是如果用戶可以輸入的條目數(shù)量沒(méi)有限制，那么你應(yīng)該使用一個(gè)更高效的解決方案。

如果你的應(yīng)用程序最終可能有數(shù)百個(gè)事件偵聽(tīng)器，那么更有效的解決方案是將一個(gè)事件偵聽(tīng)器實(shí)際綁定到整個(gè)容器，然后在單擊它時(shí)能夠訪問(wèn)每個(gè)列表項(xiàng)， 這稱為 事件委托，它比附加多帶帶的事件處理程序更有效。

下面是事件委托的代碼:

document.addEventListener("DOMContentLoaded", function() {
  let app = document.getElementById("todo-app");

  app.addEventListener("click", function(e) {
    if (e.target && e.target.nodeName === "LI") {
      let item = e.target;
      alert("you clicked on item: " + item.innerHTML)
    }
  })
})

閉包常常出現(xiàn)在面試中，以便面試官衡量你對(duì) JS 的熟悉程度，以及你是否知道何時(shí)使用閉包。

閉包基本上是內(nèi)部函數(shù)可以訪問(wèn)其范圍之外的變量。 閉包可用于實(shí)現(xiàn)隱私和創(chuàng)建函數(shù)工廠， 閉包常見(jiàn)的面試題如下：

編寫(xiě)一個(gè)函數(shù)，該函數(shù)將遍歷整數(shù)列表，并在延遲3秒后打印每個(gè)元素的索引。

經(jīng)常不正確的寫(xiě)法是這樣的：

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log("The index of this number is: " + i);
  }, 3000);
}

如果運(yùn)行上面代碼，3 秒延遲后你會(huì)看到，實(shí)際上每次打印輸出是 4，而不是期望的 0，1，2，3 。

為了正確理解為什么會(huì)發(fā)生這種情況，了解為什么會(huì)在 JavaScript 中發(fā)生這種情況將非常有用，這正是面試官試圖測(cè)試的內(nèi)容。

原因是因?yàn)?setTimeout 函數(shù)創(chuàng)建了一個(gè)可以訪問(wèn)其外部作用域的函數(shù)（閉包），該作用域是包含索引 i 的循環(huán)。 經(jīng)過(guò) 3 秒后，執(zhí)行該函數(shù)并打印出 i 的值，該值在循環(huán)結(jié)束時(shí)為 4，因?yàn)樗h(huán)經(jīng)過(guò)0,1,2,3,4并且循環(huán)最終停止在 4。

實(shí)際上有多處方法來(lái)正確的解這道題：

const arr = [10, 12, 15, 21];

for (var i = 0; i < arr.length; i++) {
  setTimeout(function(i_local){
    return function () {
      console.log("The index of this number is: " + i_local);
    }
  }(i), 3000)
}

const arr = [10, 12, 15, 21];
for (let i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log("The index of this number is: " + i);
  }, 3000);
}

有些瀏覽器事件可以在短時(shí)間內(nèi)快速觸發(fā)多次，比如調(diào)整窗口大小或向下滾動(dòng)頁(yè)面。例如，監(jiān)聽(tīng)頁(yè)面窗口滾動(dòng)事件，并且用戶持續(xù)快速地向下滾動(dòng)頁(yè)面，那么滾動(dòng)事件可能在 3 秒內(nèi)觸發(fā)數(shù)千次，這可能會(huì)導(dǎo)致一些嚴(yán)重的性能問(wèn)題。

如果在面試中討論構(gòu)建應(yīng)用程序，出現(xiàn)滾動(dòng)、窗口大小調(diào)整或按下鍵等事件請(qǐng)務(wù)必提及 防抖(Debouncing) 和 函數(shù)節(jié)流（Throttling）來(lái)提升頁(yè)面速度和性能。這兩兄弟的本質(zhì)都是以閉包的形式存在。通過(guò)對(duì)事件對(duì)應(yīng)的回調(diào)函數(shù)進(jìn)行包裹、以自由變量的形式緩存時(shí)間信息，最后用 setTimeout 來(lái)控制事件的觸發(fā)頻率。

####Throttle： 第一個(gè)人說(shuō)了算

throttle 的主要思想在于：在某段時(shí)間內(nèi)，不管你觸發(fā)了多少次回調(diào)，都只認(rèn)第一次，并在計(jì)時(shí)結(jié)束時(shí)給予響應(yīng)。

這個(gè)故事里，‘裁判’ 就是我們的節(jié)流閥， 他控制參賽者吃東西的時(shí)機(jī)， “參賽者吃東西”就是我們頻繁操作事件而不斷涌入的回調(diào)任務(wù)，它受 “裁判” 的控制,而計(jì)時(shí)器，就是上文提到的以自由變量形式存在的時(shí)間信息，它是 “裁判” 決定是否停止比賽的依據(jù)，最后，等待比賽結(jié)果就對(duì)應(yīng)到回調(diào)函數(shù)的執(zhí)行。

總結(jié)下來(lái)，所謂的“節(jié)流”，是通過(guò)在一段時(shí)間內(nèi)無(wú)視后來(lái)產(chǎn)生的回調(diào)請(qǐng)求來(lái)實(shí)現(xiàn)的。只要 裁判宣布比賽開(kāi)始，裁判就會(huì)開(kāi)啟計(jì)時(shí)器，在這段時(shí)間內(nèi)，參賽者就盡管不斷的吃，誰(shuí)也無(wú)法知道最終結(jié)果。

對(duì)應(yīng)到實(shí)際的交互上是一樣一樣的：每當(dāng)用戶觸發(fā)了一次 scroll 事件，我們就為這個(gè)觸發(fā)操作開(kāi)啟計(jì)時(shí)器。一段時(shí)間內(nèi)，后續(xù)所有的 scroll 事件都會(huì)被當(dāng)作“參賽者吃東西——它們無(wú)法觸發(fā)新的 scroll 回調(diào)。直到“一段時(shí)間”到了，第一次觸發(fā)的 scroll 事件對(duì)應(yīng)的回調(diào)才會(huì)執(zhí)行，而“一段時(shí)間內(nèi)”觸發(fā)的后續(xù)的 scroll 回調(diào)都會(huì)被節(jié)流閥無(wú)視掉。

現(xiàn)在一起實(shí)現(xiàn)一個(gè) throttle：

// fn是我們需要包裝的事件回調(diào), interval是時(shí)間間隔的閾值
function throttle(fn, interval) {
  // last為上一次觸發(fā)回調(diào)的時(shí)間
  let last = 0
  
  // 將throttle處理結(jié)果當(dāng)作函數(shù)返回
  return function () {
      // 保留調(diào)用時(shí)的this上下文
      let context = this
      // 保留調(diào)用時(shí)傳入的參數(shù)
      let args = arguments
      // 記錄本次觸發(fā)回調(diào)的時(shí)間
      let now = +new Date()
      
      // 判斷上次觸發(fā)的時(shí)間和本次觸發(fā)的時(shí)間差是否小于時(shí)間間隔的閾值
      if (now - last >= interval) {
      // 如果時(shí)間間隔大于我們?cè)O(shè)定的時(shí)間間隔閾值，則執(zhí)行回調(diào)
          last = now;
          fn.apply(context, args);
      }
    }
}

// 用throttle來(lái)包裝scroll的回調(diào)
const better_scroll = throttle(() => console.log("觸發(fā)了滾動(dòng)事件"), 1000)

document.addEventListener("scroll", better_scroll)

Debounce： 最后一個(gè)參賽者說(shuō)了算

防抖的主要思想在于：我會(huì)等你到底。在某段時(shí)間內(nèi)，不管你觸發(fā)了多少次回調(diào)，我都只認(rèn)最后一次。

繼續(xù)大胃王比賽故事，這次換了一種比賽方式，時(shí)間不限，參賽者吃到不能吃為止，當(dāng)每個(gè)參賽都吃不下的時(shí)候，后面10分鐘如果沒(méi)有人在吃，比賽結(jié)束，如果有人在10分鐘內(nèi)還能吃，則比賽繼續(xù)，直到下一次10分鐘內(nèi)無(wú)人在吃時(shí)為止。

對(duì)比 throttle 來(lái)理解 debounce： 在 throttle 的邏輯里， ‘裁判’ 說(shuō)了算，當(dāng)比賽時(shí)間到時(shí)，就執(zhí)行回調(diào)函數(shù)。而 debounce 認(rèn)為最后一個(gè)參賽者說(shuō)了算，只要還能吃的，就重新設(shè)定新的定時(shí)器。

現(xiàn)在一起實(shí)現(xiàn)一個(gè) debounce：

// fn是我們需要包裝的事件回調(diào), delay是每次推遲執(zhí)行的等待時(shí)間
function debounce(fn, delay) {
  // 定時(shí)器
  let timer = null
  
  // 將debounce處理結(jié)果當(dāng)作函數(shù)返回
  return function () {
    // 保留調(diào)用時(shí)的this上下文
    let context = this
    // 保留調(diào)用時(shí)傳入的參數(shù)
    let args = arguments

    // 每次事件被觸發(fā)時(shí)，都去清除之前的舊定時(shí)器
    if(timer) {
        clearTimeout(timer)
    }
    // 設(shè)立新定時(shí)器
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

// 用debounce來(lái)包裝scroll的回調(diào)
const better_scroll = debounce(() => console.log("觸發(fā)了滾動(dòng)事件"), 1000)

document.addEventListener("scroll", better_scroll)

用 Throttle 來(lái)優(yōu)化 Debounce

debounce 的問(wèn)題在于它“太有耐心了”。試想，如果用戶的操作十分頻繁——他每次都不等 debounce 設(shè)置的 delay 時(shí)間結(jié)束就進(jìn)行下一次操作，于是每次 debounce 都為該用戶重新生成定時(shí)器，回調(diào)函數(shù)被延遲了不計(jì)其數(shù)次。頻繁的延遲會(huì)導(dǎo)致用戶遲遲得不到響應(yīng)，用戶同樣會(huì)產(chǎn)生“這個(gè)頁(yè)面卡死了”的觀感。

為了避免弄巧成拙，我們需要借力 throttle 的思想，打造一個(gè)“有底線”的 debounce——等你可以，但我有我的原則：delay 時(shí)間內(nèi)，我可以為你重新生成定時(shí)器；但只要delay的時(shí)間到了，我必須要給用戶一個(gè)響應(yīng)。這個(gè) throttle 與 debounce “合體”思路，已經(jīng)被很多成熟的前端庫(kù)應(yīng)用到了它們的加強(qiáng)版 throttle 函數(shù)的實(shí)現(xiàn)中：

// fn是我們需要包裝的事件回調(diào), delay是時(shí)間間隔的閾值
function throttle(fn, delay) {
  // last為上一次觸發(fā)回調(diào)的時(shí)間, timer是定時(shí)器
  let last = 0, timer = null
  // 將throttle處理結(jié)果當(dāng)作函數(shù)返回
  
  return function () { 
    // 保留調(diào)用時(shí)的this上下文
    let context = this
    // 保留調(diào)用時(shí)傳入的參數(shù)
    let args = arguments
    // 記錄本次觸發(fā)回調(diào)的時(shí)間
    let now = +new Date()
    
    // 判斷上次觸發(fā)的時(shí)間和本次觸發(fā)的時(shí)間差是否小于時(shí)間間隔的閾值
    if (now - last < delay) {
    // 如果時(shí)間間隔小于我們?cè)O(shè)定的時(shí)間間隔閾值，則為本次觸發(fā)操作設(shè)立一個(gè)新的定時(shí)器
       clearTimeout(timer)
       timer = setTimeout(function () {
          last = now
          fn.apply(context, args)
        }, delay)
    } else {
        // 如果時(shí)間間隔超出了我們?cè)O(shè)定的時(shí)間間隔閾值，那就不等了，無(wú)論如何要反饋給用戶一次響應(yīng)
        last = now
        fn.apply(context, args)
    }
  }
}

// 用新的throttle包裝scroll的回調(diào)
const better_scroll = throttle(() => console.log("觸發(fā)了滾動(dòng)事件"), 1000)

document.addEventListener("scroll", better_scroll)

參考:

Throttling and Debouncing in JavaScript The Difference Between Throttling and Debouncing Examples of Throttling and Debouncing Remy Sharp’s blog post on Throttling function calls 前端性能優(yōu)化原理與實(shí)踐

你的點(diǎn)贊是我持續(xù)分享好東西的動(dòng)力，歡迎點(diǎn)贊！

歡迎加入前端大家庭，里面會(huì)經(jīng)常分享一些技術(shù)資源。