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

[[285702]]

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

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

1、節(jié)流(throttle)

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

代碼示例：

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

2、防抖(Debounce)

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

代碼示例：

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

3、節(jié)流和防抖的實際應(yīng)用

在我們的應(yīng)用中，單一的應(yīng)用節(jié)流或者防抖都不是一個好主意。

場景：如果用戶的操作十分頻繁——他每次都不等 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)。這個節(jié)流與防抖結(jié)合的思路。

代碼示例：

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

問題2、事件委托代理

傳統(tǒng)的事件綁定方式：

<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í)行的效率非常低下。如何高效的進(jìn)行事件綁定：

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

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、閉包的使用

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

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

不正確的閉包應(yī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); 
} 

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

原因是因為 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); 
}