節流函數是web前端開發中經常用到的一個開發技巧,在input實時搜索,滾動事件等,為了避免過多消耗性能,我們都會使用節流函數.在《JavaScript高級程序設計》一書中有這樣的一個例子:
function throttle (method, context) {
clearTimeout((method.tId))
method.tId = setTimeout(function () {
method.call(context)
}, 100)
}
function resizeDiv () {
var div = document.getElementById('myDiv')
div.style.height = div.offsetWidth + 'px'
}
window.onresize = function () {
throttle(resizeDiv)
}
這個就是很典型的函數節流的應用,不多解釋,本文通過vue的自定義指令封裝類似的方法.
type="text"
v-model="text"
v-debounce="search"
>
以上代碼實現了一個實時搜索類的函數節流,通過vue自定義指令v-debounce實現.原本,如果我們想做一個實施搜索,那麼會直接用@keyup=search,這樣就會非常耗性能,鍵盤敲一下,就會調用一次search事件,如果是ajax請求,那麼會非常不友好,所以通過v-debounce,則可以在鍵盤連續敲擊的時候組織運行,停留300毫秒才執行.
通過vue的自定義指令,還可以將其掛載在全局,那樣就能全局通過v-debounce調用了.這個比傳統方法簡單很多,不需要call,apply之類的.
關鍵點:vue 的自定義指令傳遞的參數binding 如果是一個函數,則通過binding.value()來執行,通過上述示例,還可以傳遞比如事件, 綁定對象之類的,上例綁定的是el, keyup事件,這些也可以通過binding傳遞,通過vue的自定義指令,可以簡化很多重複代碼,並且邏輯更加清晰
對前端的技術，架構技術感興趣的同學關注我的頭條號，並在後臺私信發送關鍵字：“前端”即可獲取免費的架構師學習資料
知識體系已整理好，歡迎免費領取。還有面試視頻分享可以免費獲取。關注我，可以獲得沒有的架構經驗哦！！
分享到:
閱讀更多 前端全棧架構丶 的文章
關鍵字: 程序設計 JavaScript 函數
