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

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

讓我們開始吧！注意，我們將在下面的示例中使用原生的 JavaScript，因為面試官通常希望了解你在沒有 jQuery 等庫的幫助下對JavaScript 和 DOM 的理解程度。

問題 1: 事件委托代理

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

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

<ul id="todo-app">  
  <li class="item">Walk the dog</li>  
  <li class="item">Pay bills</li>  
  <li class="item">Make dinner</li>  
  <li class="item">Code for one hour</li>  
</ul> 

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

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ù)上是可行的，但問題是要將事件分別綁定到每個項。這對于目前 4 個元素來說，沒什么大問題，但是如果在待辦事項列表中添加了 10,000 項(他們可能有很多事情要做)怎么辦?然后，函數(shù)將創(chuàng)建 10,000 個獨立的事件偵聽器，并將每個事件監(jiān)聽器綁定到 DOM ，這樣代碼執(zhí)行的效率非常低下。

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

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

下面是事件委托的代碼: 

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)  
    }  
  })  
}) 

問題 2： 在循環(huán)中使用閉包

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

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

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

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

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);  
} 

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

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

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

實際上有多處方法來正確的解這道題： 

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);  
} 

問題 3：事件的節(jié)流（throttle）與防抖（debounce）

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

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

Throttle： ***個人說了算

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

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

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

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

現(xiàn)在一起實現(xiàn)一個 throttle： 

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

Debounce： ***一個參賽者說了算

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

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

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

現(xiàn)在一起實現(xiàn)一個 debounce： 

// fn是我們需要包裝的事件回調(diào), delay是每次推遲執(zhí)行的等待時間  
function debounce(fn, delay) {  
  // 定時器  
  let timer = null  
  // 將debounce處理結(jié)果當(dāng)作函數(shù)返回  
  return function () {  
    // 保留調(diào)用時的this上下文  
    let context = this  
    // 保留調(diào)用時傳入的參數(shù)  
    let args = arguments  
    // 每次事件被觸發(fā)時，都去清除之前的舊定時器  
    if(timer) {  
        clearTimeout(timer)  
    }  
    // 設(shè)立新定時器  
    timer = setTimeout(function () {  
      fn.apply(context, args)  
    }, delay)  
  }  
}  
// 用debounce來包裝scroll的回調(diào)  
const better_scroll = debounce(() => console.log('觸發(fā)了滾動事件'), 1000)  
document.addEventListener('scroll', better_scroll) 

用 Throttle 來優(yōu)化 Debounce

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

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

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