有些瀏覽器事件可以在短時間內快速觸發多次,例如調整視窗大小或向下捲動頁面。例如,監聽頁面視窗捲動事件,而且使用者持續快速地向下捲動頁面,那麼捲動事件可能會在 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)
Debounce: 最後一個人說了算
防手震的中心思想在於:我會等你到底。在某段時間內,不管你觸發了多少次回調,我都只認最後一次。
繼續講司機開車的故事。這次的司機比較有耐心。第一個乘客上車後,司機開始計時(比如說十分鐘)。十分鐘之內,如果又上來了一個乘客,司機會把計時器清零,重新開始等另一個十分鐘(延遲了等待)。直到有這麼一位乘客,從他上車開始,後續十分鐘都沒有新乘客上車,司機會認為確實沒有人需要搭這趟車了,才會把車開走。
我們比較 throttle 來理解 debounce:在throttle的邏輯裡,“第一個人說了算”,它只為第一個乘客計時,時間到了就執行回調。而 debounce 認為,“最後一個人說了算”,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)
用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)
在Vue 裡使用lodash 中的Debouncing 和Throttling
事件节流和防抖是提高性能或降低网络开销的好方法。虽然 Vue 1曾经支持对事件的节流和防抖,但是在Vue 2中为了保持核心的简单性,删除对事件的节流和防抖的支持。因此,在Vue 2对对事件进行防抖和节流我们可以使用 lodash
来做。
安装
可以通过 yarn 或 npm 安装 lodash。
# Yarn $ yarn add lodash # NPM $ npm install lodash --save
注意:如果我们不想导入lodash
的所有内容,而只导入所需的部分,则可以通过一些Webpack构建自定义来解决问题。 还可以使用lodash.throttle
和lodash.debounce
等软件包分别安装和导入lodash
的各个部分。
throttling 方法
要对事件进行节流处理方法非常简单,只需将要调用的函数包装在lodash的_.throttle
函数中即可。
<template> <button @click="throttledMethod()">Click me as fast as you can!</button> </template> <script> import _ from 'lodash' export default { methods: { throttledMethod: _.throttle(() => { console.log('I get fired every two seconds!') }, 2000) } } </script>
debouncing 方法
尽管节流在某些情况下很有用,但一般情况我们经常使用的是防抖。 防抖实质上将我们的事件分组在一起,并防止它们被频繁触发。 要在Vue组件中使用节流,只需将要调用的函数包装在lodash的_.debounce
函数中。
<template> <button @click="throttledMethod()">Click me as fast as you can!</button> </template> <script> import _ from 'lodash' export default { methods: { throttledMethod: _.debounce(() => { console.log('I only get fired once every two seconds, max!') }, 2000) } } </script>
参考:
相关推荐:
更多编程相关知识,请访问:编程入门!!
以上是Vue中怎麼對事件進行防手震和節流操作?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

Netflix主要使用React作為前端框架,輔以Vue用於特定功能。 1)React的組件化和虛擬DOM提升了Netflix應用的性能和開發效率。 2)Vue在Netflix的內部工具和小型項目中應用,其靈活性和易用性是關鍵。

Vue.js是一種漸進式JavaScript框架,適用於構建複雜的用戶界面。 1)其核心概念包括響應式數據、組件化和虛擬DOM。 2)實際應用中,可以通過構建Todo應用和集成VueRouter來展示其功能。 3)調試時,建議使用VueDevtools和console.log。 4)性能優化可通過v-if/v-show、列表渲染優化和異步加載組件等實現。

Vue.js適合小型到中型項目,而React更適用於大型、複雜應用。 1.Vue.js的響應式系統通過依賴追踪自動更新DOM,易於管理數據變化。 2.React採用單向數據流,數據從父組件流向子組件,提供明確的數據流向和易於調試的結構。

Vue.js適合中小型項目和快速迭代,React適用於大型複雜應用。 1)Vue.js易於上手,適用於團隊經驗不足或項目規模較小的情況。 2)React的生態系統更豐富,適合有高性能需求和復雜功能需求的項目。

實現 Vue 中 a 標籤跳轉的方法包括:HTML 模板中使用 a 標籤指定 href 屬性。使用 Vue 路由的 router-link 組件。使用 JavaScript 的 this.$router.push() 方法。可通過 query 參數傳遞參數,並在 router 選項中配置路由以進行動態跳轉。

Vue 中實現組件跳轉有以下方法:使用 router-link 和 <router-view> 組件進行超鏈接跳轉,指定 :to 屬性為目標路徑。直接使用 <router-view> 組件顯示當前路由渲染的組件。使用 router.push() 和 router.replace() 方法進行程序化導航,前者保存歷史記錄,後者替換當前路由不留記錄。

Vue 中 div 元素跳轉的方法有兩種:使用 Vue Router,添加 router-link 組件。添加 @click 事件監聽器,調用 this.$router.push() 方法跳轉。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

EditPlus 中文破解版
體積小,語法高亮,不支援程式碼提示功能

記事本++7.3.1
好用且免費的程式碼編輯器

VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器