怎么在Vue中封裝一個(gè)節(jié)流函數(shù)

今天就跟大家聊聊有關(guān)怎么在Vue中封裝一個(gè)節(jié)流函數(shù)，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

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)
 }

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

 <template>
 <div>
  <input
   type="text"
   v-model="text"
   v-debounce="search"
  >
 </div>
</template>
<script>
 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 () {
   // 實(shí)際要進(jìn)行的操作 axios.get('')之類的
    this.count++
    console.log('count is:' + this.count)
   }
  }
 }
</script>

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

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

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

看完上述內(nèi)容，你們對(duì)怎么在Vue中封裝一個(gè)節(jié)流函數(shù)有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。