節(jié)流函數(shù)是web前端開發(fā)中經(jīng)常用到的一個開發(fā)技巧,在input實時搜索,滾動事件等,為了避免過多消耗性能,我們都會使用節(jié)流函數(shù).在《JavaScript高級程序設(shè)計》一書中有這樣的一個例子:

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)

}

這個就是很典型的函數(shù)節(jié)流的應(yīng)用,不多解釋,本文通過vue的自定義指令封裝類似的方法.

type="text"

v-model="text"

v-debounce="search"

>

export default {

name: 'debounce',

data () {

return {

msg: 'Welcome to Your Vue.js App',

text: '',

count: 1

}

},

directives: {

debounce: {

inserted: function (el, binding) {

let timer

el.addEventListener('keyup', () => {

if (timer) {

clearTimeout(timer)

}

timer = setTimeout(() => {

binding.value()

}, 300)

})

}

}

},

methods: {

search () {

// 實際要進行的操作 axios.get('')之類的

this.count++

console.log('count is:' + this.count)

}

}

}

以上代碼實現(xiàn)了一個實時搜索類的函數(shù)節(jié)流,通過vue自定義指令v-debounce實現(xiàn).原本,如果我們想做一個實施搜索,那么會直接用@keyup=search,這樣就會非常耗性能,鍵盤敲一下,就會調(diào)用一次search事件,如果是ajax請求,那么會非常不友好,所以通過v-debounce,則可以在鍵盤連續(xù)敲擊的時候組織運行,停留300毫秒才執(zhí)行.

通過vue的自定義指令,還可以將其掛載在全局,那樣就能全局通過v-debounce調(diào)用了.這個比傳統(tǒng)方法簡單很多,不需要call,apply之類的.

關(guān)鍵點:vue 的自定義指令傳遞的參數(shù)binding 如果是一個函數(shù),則通過binding.value()來執(zhí)行,通過上述示例,還可以傳遞比如事件, 綁定對象之類的,上例綁定的是el, keyup事件,這些也可以通過binding傳遞,通過vue的自定義指令,可以簡化很多重復(fù)代碼,并且邏輯更加清晰

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。

本文標(biāo)題: Vue自定義指令封裝節(jié)流函數(shù)的方法示例

本文地址: http://www.cppcns.com/ruanjian/java/232411.html

總結(jié)

以上是生活随笔為你收集整理的vue自定义指令封装节流_Vue自定义指令封装节流函数的方法示例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。