摘要:相反,在討論時,面試中通常會提到三件事。而認為最后一個參賽者說了算,只要還能吃的,就重新設(shè)定新的定時器。試想,如果用戶的操作十分頻繁他每次都不等設(shè)置的時間結(jié)束就進行下一次操作,于是每次都為該用戶重新生成定時器,回調(diào)函數(shù)被延遲了不計其數(shù)次。
本文不是討論最新的 JavaScript 庫、常見的開發(fā)實踐或任何新的 ES6 函數(shù)。相反,在討論 JavaScript 時,面試中通常會提到三件事。我自己也被問到這些問題,我的朋友們告訴我他們也被問到這些問題。
然而,這些并不是你在面試之前應(yīng)該學習的唯一三件事 - 你可以通過多種方式更好地為即將到來的面試做準備 - 但面試官可能會問到下面是三個問題,來判斷你對 JavaScript 語言的理解和 DOM 的掌握程度。
讓我們開始吧!注意,我們將在下面的示例中使用原生的 JavaScript,因為面試官通常希望了解你在沒有 jQuery 等庫的幫助下對JavaScript 和 DOM 的理解程度。
想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你!
問題 1: 事件委托代理在構(gòu)建應(yīng)用程序時,有時需要將事件綁定到頁面上的按鈕、文本或圖像,以便在用戶與元素交互時執(zhí)行某些操作。
如果我們以一個簡單的待辦事項列表為例,面試官可能會告訴你,當用戶點擊列表中的一個列表項時執(zhí)行某些操作。他們希望你用 JavaScript 實現(xiàn)這個功能,假設(shè)有如下 HTML 代碼:
你可能想要做如下操作來將事件綁定到元素:
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ù)量是多少。例如,如果它不超過 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ù)千次,這可能會導致一些嚴重的性能問題。
如果在面試中討論構(gòu)建應(yīng)用程序,出現(xiàn)滾動、窗口大小調(diào)整或按下鍵等事件請務(wù)必提及 防抖(Debouncing) 和 函數(shù)節(jié)流(Throttling)來提升頁面速度和性能。這兩兄弟的本質(zhì)都是以閉包的形式存在。通過對事件對應(yīng)的回調(diào)函數(shù)進行包裹、以自由變量的形式緩存時間信息,最后用 setTimeout 來控制事件的觸發(fā)頻率。
####Throttle: 第一個人說了算
throttle 的主要思想在于:在某段時間內(nèi),不管你觸發(fā)了多少次回調(diào),都只認第一次,并在計時結(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)到實際的交互上是一樣一樣的:每當用戶觸發(fā)了一次 scroll 事件,我們就為這個觸發(fā)操作開啟計時器。一段時間內(nèi),后續(xù)所有的 scroll 事件都會被當作“參賽者吃東西——它們無法觸發(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é)果當作函數(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)
防抖的主要思想在于:我會等你到底。在某段時間內(nèi),不管你觸發(fā)了多少次回調(diào),我都只認最后一次。
繼續(xù)大胃王比賽故事,這次換了一種比賽方式,時間不限,參賽者吃到不能吃為止,當每個參賽都吃不下的時候,后面10分鐘如果沒有人在吃,比賽結(jié)束,如果有人在10分鐘內(nèi)還能吃,則比賽繼續(xù),直到下一次10分鐘內(nèi)無人在吃時為止。
對比 throttle 來理解 debounce: 在 throttle 的邏輯里, ‘裁判’ 說了算,當比賽時間到時,就執(zhí)行回調(diào)函數(shù)。而 debounce 認為最后一個參賽者說了算,只要還能吃的,就重新設(shè)定新的定時器。
現(xiàn)在一起實現(xiàn)一個 debounce:
// fn是我們需要包裝的事件回調(diào), delay是每次推遲執(zhí)行的等待時間 function debounce(fn, delay) { // 定時器 let timer = null // 將debounce處理結(jié)果當作函數(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)
debounce 的問題在于它“太有耐心了”。試想,如果用戶的操作十分頻繁——他每次都不等 debounce 設(shè)置的 delay 時間結(jié)束就進行下一次操作,于是每次 debounce 都為該用戶重新生成定時器,回調(diào)函數(shù)被延遲了不計其數(shù)次。頻繁的延遲會導致用戶遲遲得不到響應(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é)果當作函數(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)
參考:
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 前端性能優(yōu)化原理與實踐
你的點贊是我持續(xù)分享好東西的動力,歡迎點贊!
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/6962.html
摘要:相反,在討論時,面試中通常會提到三件事。通過對事件對應(yīng)的回調(diào)函數(shù)進行包裹以自由變量的形式緩存時間信息,最后用來控制事件的觸發(fā)頻率。而認為最后一個參賽者說了算,只要還能吃的,就重新設(shè)定新的定時器。 showImg(https://segmentfault.com/img/bVboH5x?w=1000&h=750); 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你! 本...
摘要:更高效的解決方案是將一個事件偵聽器實際綁定到父容器上,然后在實際單擊時可以訪問每個確切元素。如果將事件偵聽器綁定到窗口滾動事件上,并且用戶快速滾動頁面,事件很可能會在短時間多次觸發(fā)。 原文鏈接 問題 #1: 事件委托 事件委托,也叫事件委派,事件代理。 當構(gòu)建應(yīng)用程序時,有時需要將事件監(jiān)聽器綁定到頁面上的某些元素上,以便在用戶與元素交互時執(zhí)行某些操作。 假設(shè)我們現(xiàn)在有一個無序列表: ...
摘要:方法靜態(tài)方法可以直接通過類名調(diào)用,任何的實例也可以調(diào)用因此靜態(tài)方法中不能用和關(guān)鍵字,不能直接訪問所屬類的非靜態(tài)變量和非靜態(tài)方法,只能訪問所屬類的靜態(tài)成員變量和靜態(tài)成員方法。 static可以理解為全局的。static可以修飾: 變量,方法,代碼塊,內(nèi)部類。 static變量被static修飾的變量,叫靜態(tài)變量或類變量;static的變量一直只有一個,被所有對象共享。*對于靜態(tài)變量在內(nèi)存...
摘要:了解歷史和是與服務(wù)器交互的方式,說到方式,其實總共有四種。區(qū)別分析把請求的數(shù)據(jù)放在上,即協(xié)議頭上,其格式為以分割和傳輸數(shù)據(jù),參數(shù)之間以相連。在瀏覽器回退時是無害的,會再次提交請求。請求只能進行編碼,而支持多種編碼方式。 了解歷史 get和post是HTTP與服務(wù)器交互的方式, 說到方式,其實總共有四種: post、delete、put、get。 他們的作用分別是對服務(wù)器資源的增、刪、改...
閱讀 3588·2021-09-13 10:28
閱讀 1937·2021-08-10 09:43
閱讀 1010·2019-08-30 15:44
閱讀 3178·2019-08-30 13:14
閱讀 1830·2019-08-29 16:56
閱讀 2938·2019-08-29 16:35
閱讀 2843·2019-08-29 12:58
閱讀 864·2019-08-26 13:46