前端JS面試中經常會被問到的問題有哪些

本篇內容介紹了“前端JS面試中經常會被問到的問題有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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

“前端JS面試中經常會被問到的問題有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！