Javascript 面試中經常被問到的三個問題！

PrototypeZ 發布于2019-08-23 15:34 / 3092人閱讀

摘要：相反，在討論時，面試中通常會提到三件事。通過對事件對應的回調函數進行包裹以自由變量的形式緩存時間信息，最后用來控制事件的觸發頻率。而認為最后一個參賽者說了算，只要還能吃的，就重新設定新的定時器。

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！

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

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

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

問題 1: 事件委托代理

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

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


  Walk the dog
  Pay bills
  Make dinner
  Code for one hour

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

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 ，這樣代碼執行的效率非常低下。

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

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

下面是事件委托的代碼:

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：在循環中使用閉包

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

閉包基本上是內部函數可以訪問其范圍之外的變量。閉包可用于實現隱私和創建函數工廠，閉包常見的面試題如下：

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

經常不正確的寫法是這樣的：

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 。

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

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

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

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

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

Throttle：第一個人說了算

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

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

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

對應到實際的交互上是一樣一樣的：每當用戶觸發了一次 scroll 事件，我們就為這個觸發操作開啟計時器。一段時間內，后續所有的 scroll 事件都會被當作“參賽者吃東西——它們無法觸發新的 scroll 回調。直到“一段時間”到了，第一次觸發的 scroll 事件對應的回調才會執行，而“一段時間內”觸發的后續的 scroll 回調都會被節流閥無視掉。

現在一起實現一個 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)

Debounce：最后一個參賽者說了算

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

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

對比 throttle 來理解 debounce：在 throttle 的邏輯里， ‘裁判’ 說了算，當比賽時間到時，就執行回調函數。而 debounce 認為最后一個參賽者說了算，只要還能吃的，就重新設定新的定時器。

現在一起實現一個 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)

用 Throttle 來優化 Debounce

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

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

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

參考:

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
前端性能優化原理與實踐

原文：

https://medium.freecodecamp.o...

你的點贊是我持續分享好東西的動力，歡迎點贊！

交流

干貨系列文章匯總如下，覺得不錯點個Star，歡迎加群互相學習。

https://github.com/qq44924588...

我是小智，公眾號「大遷世界」作者，對前端技術保持學習愛好者。我會經常分享自己所學所看的干貨，在進階的路上，共勉！

關注公眾號，后臺回復福利，即可看到福利，你懂的。

GPU云服務器云服務器面試問到 json 阿里云服務器經常出問題面試問題 java中三個3e

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/102251.html

Javascript 面試中經常被問到的三個問題！

摘要：相反，在討論時，面試中通常會提到三件事。而認為最后一個參賽者說了算，只要還能吃的，就重新設定新的定時器。試想，如果用戶的操作十分頻繁他每次都不等設置的時間結束就進行下一次操作，于是每次都為該用戶重新生成定時器，回調函數被延遲了不計其數次。本文不是討論最新的 JavaScript 庫、常見的開發實踐或任何新的 ES6 函數。相反，在討論 JavaScript 時，面試中通常會提到三件事。我自己...

chnmagnus 2019-05-23 12:20 評論0 收藏0
3個經常被問到的 JavaScript 面試題

摘要：更高效的解決方案是將一個事件偵聽器實際綁定到父容器上，然后在實際單擊時可以訪問每個確切元素。如果將事件偵聽器綁定到窗口滾動事件上，并且用戶快速滾動頁面，事件很可能會在短時間多次觸發。原文鏈接問題 #1: 事件委托事件委托，也叫事件委派，事件代理。當構建應用程序時，有時需要將事件監聽器綁定到頁面上的某些元素上，以便在用戶與元素交互時執行某些操作。假設我們現在有一個無序列表： ...

Galence 2019-08-21 15:21 評論0 收藏0
static關鍵字，面試經常被問到！（一）

摘要：方法靜態方法可以直接通過類名調用，任何的實例也可以調用因此靜態方法中不能用和關鍵字，不能直接訪問所屬類的非靜態變量和非靜態方法，只能訪問所屬類的靜態成員變量和靜態成員方法。 static可以理解為全局的。static可以修飾：變量，方法，代碼塊，內部類。 static變量被static修飾的變量，叫靜態變量或類變量；static的變量一直只有一個，被所有對象共享。*對于靜態變量在內存...

marek 2019-08-14 18:34 評論0 收藏0
post和get的區別，面試經常被問到！（二）

摘要：了解歷史和是與服務器交互的方式，說到方式，其實總共有四種。區別分析把請求的數據放在上，即協議頭上，其格式為以分割和傳輸數據，參數之間以相連。在瀏覽器回退時是無害的，會再次提交請求。請求只能進行編碼，而支持多種編碼方式。了解歷史 get和post是HTTP與服務器交互的方式，說到方式，其實總共有四種: post、delete、put、get。他們的作用分別是對服務器資源的增、刪、改...

vvpvvp 2019-08-14 18:34 評論0 收藏0