本文不是討論新的 JavaScript 庫、常見的開發實踐或任何新的 ES6 函數，只是聊聊在面試中出現頻率比較高的的幾道面試題。

[[285702]]

問題1、事件的節流(throttle)與防抖(debounce)

有些瀏覽器事件可以在短時間內快速觸發多次，比如調整窗口大小或向下滾動頁面。例如，監聽頁面窗口滾動事件，并且用戶持續快速地向下滾動頁面，那么滾動事件可能在 3 秒內觸發數千次，這可能會導致一些嚴重的性能問題。那我們應該如何去避免這樣的問題，下面有兩種方法：

1、節流(throttle)

節流的主要思想在于：在某段時間內，不管你觸發了多少次回調，都只認第一次，并在計時結束時給予響應。

代碼示例：

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

2、防抖(Debounce)

防抖的主要思想在于：我會等你到底。在某段時間內，不管你觸發了多少次回調，我都只認最后一次。

代碼示例：

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

3、節流和防抖的實際應用

在我們的應用中，單一的應用節流或者防抖都不是一個好主意。

場景：如果用戶的操作十分頻繁——他每次都不等 debounce 設置的 delay 時間結束就進行下一次操作，于是每次 debounce 都為該用戶重新生成定時器，回調函數被延遲了不計其數次。頻繁的延遲會導致用戶遲遲得不到響應，用戶同樣會產生“這個頁面卡死了”的觀感。

為了避免弄巧成拙，我們需要借力 throttle 的思想，打造一個“有底線”的 debounce——等你可以，但我有我的原則：delay 時間內，我可以為你重新生成定時器;但只要delay的時間到了，我必須要給用戶一個響應。這個節流與防抖結合的思路。

代碼示例：

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

問題2、事件委托代理

傳統的事件綁定方式：

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

雖然這在技術上是沒什么問題的，但問題是要將事件分別綁定到每個項。這對于目前 4 個元素來說，沒什么大問題，但是如果在待辦事項列表中添加了 10,000 項(他們可能有很多事情要做)怎么辦?然后，函數將創建 10,000 個獨立的事件偵聽器，并將每個事件監聽器綁定到 DOM ，這樣代碼執行的效率非常低下。如何高效的進行事件綁定：

基于事件委托的代碼示例：

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

問題3、閉包的使用

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

閉包基本上是內部函數可以訪問其范圍之外的變量。 閉包可用于實現隱藏變量和創建函數工廠。

不正確的閉包應用：

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 。

原因是因為 setTimeout 函數創建了一個可以訪問其外部作用域的函數(閉包)，該作用域是包含索引 i 的循環。 經過 3 秒后，執行該函數并打印出 i 的值，該值在循環結束時為 4，因為它循環經過0,1,2,3,4并且循環最終停止在 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); 
}