在VUE中使用lodash的debounce和throttle操作 | Vue throttle
阿新•來源:網路•發佈:2020-11-09說明:debounce和throttle在腳手架的使用,此處以防抖函式debounce為例避免按鈕被重複點選引入:importlodashfromlodash使用:直接使用debounce方法//稽核audit:lodash.debounce(function(){this.$refs[model].saveTotalResult(1).then(()=>{constreportId=this.activeReport.id;report.audit(reportId).then(res=>{successMsg(res.msg)})})},300)補充知識:在Vue中使用lodash對事件進行防抖和節流有些瀏覽器事件可以在短時間內快速觸發多次,比如調整視窗大小或向下滾動頁面。例如,監聽頁面...
阿新 • 來源:網路 • 發佈:2020-11-09
說明:
debounce和throttle在腳手架的使用,此處以防抖函式debounce為例避免按鈕被重複點選
引入:
import lodash from lodash
使用:
直接使用debounce方法
// 稽核 audit: lodash.debounce(function() { this.$refs[model].saveTotalResult(1).then(() => { const reportId = this.activeReport.id; report.audit(reportId).then(res => { successMsg(res.msg) }) }) },300)補充知識:在 Vue 中使用lodash對事件進行防抖和節流
有些瀏覽器事件可以在短時間內快速觸發多次,比如調整視窗大小或向下滾動頁面。
例如,監聽頁面視窗滾動事件,並且使用者持續快速地向下滾動頁面,那麼滾動事件可能在 3 秒內觸發數千次,這可能會導致一些嚴重的效能問題。
如果在面試中討論構建應用程式,出現滾動、視窗大小調整或按下鍵等事件請務必提及 防抖(Debouncing) 和 函式節流(Throttling)來提升頁面速度和效能。這兩兄弟的本質都是以閉包的形式存在。通過對事件對應的回撥函式進行包裹、以自由變數的形式快取時間資訊,最後用 setTimeout 來控制事件的觸發頻率。
Throttle:第一個人說了算
throttle 的中心思想在於:在某段時間內,不管你觸發了多少次回撥,我都只認第一次,並在計時結束時給予響應。
先給大家講個小故事:現在有一個旅客剛下了飛機,需要用車,於是打電話叫了該機場唯一的一輛機場大巴來接。司機開到機場,心想來都來了,多接幾個人一起走吧,這樣這趟才跑得值——我等個十分鐘看看。於是司機一邊打開了計時器,一邊招呼...