vueでのジッタ防止関数コンポーネントの使用

初級
1、手ブレ防止関数を書く

/**
 * @desc     
 * @param {       } func
 * @param {    } wait
 * @param {      } immediate
 */
export function debounce(func, wait, immediate) {
  let timeout
  
  return function(...args) {
    let context = this
    if (timeout) clearTimeout(timeout)

    if (immediate) {
      let callNow = !timeout
      timeout = setTimeout(function() {
        timeout = null
      }, wait)
      if (callNow) func.apply(context, args)
    } else {
      timeout = setTimeout(function() {
        func.apply(context, args)
      }, wait)
    }
  }
}

2、そして使用するセットにimportが入ってくる

import { debounce } from 'xxx'

export default {
	data: {
		return {
			vm: this
		}
	},
	methods: {
		toDoSth: debounce((vm) => {
			//               
			//                、  
			//     ，              ，         。
		}, 
		500, 
		true
		)
	}
}

3、コンポーネントメソッドでの使用
template:

<div @click="toDoSth(vm)">div>

上級
上の書き方で問題は解決していますが、なんだか見栄えがしません.ネットで検索してみると、ある兄たちがブレ防止を一つのコンポーネントにパッケージしているのを見て、やはり私が思ったのと同じです.しかし、この兄弟たちは直接コンテキストをパラメータとして伝達し、私がインスタンス全体を伝達するよりも上手で、私はこの基礎の上でimmediateの機能を追加し、デフォルトのeventパラメータを伝達しない場合の処理を追加しました.
debounce.jsファイル:

import Vue from 'vue'

const debounce = (func, time, ctx, immediate) => {
  let timer
  const rtn = (...params) => {
    clearTimeout(timer)

    if (immediate) {
      let callNow = !timer
      timer = setTimeout(() => {
        timer = null
      }, time)
      if (callNow) func.apply(ctx, params)
    } else {
      timer = setTimeout(() => {
        func.apply(ctx, params)
      }, time)
    }
  }
  return rtn
}

Vue.component('Debounce', {
  abstract: true,
  props: ['time', 'events', 'immediate'],
  created() {
    this.eventKeys = this.events && this.events.split(',')
  },
  render() {
    const vnode = this.$slots.default[0]
  
    //         events，            
    if (!this.eventKeys) {
      this.eventKeys = Object.keys(vnode.data.on)
    }
    
    this.eventKeys.forEach(key => {
      vnode.data.on[key] = debounce(
        vnode.data.on[key],
        this.time,
        vnode,
        this.immediate
      )
    })

    return vnode
  }
})

使用方法:
1、debounce.jsファイルの導入

import 'xxx/debounce.js'

export default {
	methods: {
		toDoSth(e) {
			//          
		}
	}
}

2、テンプレートに使う.ここでtimeは必須パラメータです.eventパラメータとimmediateパラメータはオプションです.コンポーネントの下に複数のイベントバインドがある場合、eventはジッタ防止処理が必要なイベントをカスタマイズできます.すぐに実行する必要がある場合は、immediateパラメータをtrueに設定できます.

<Debounce :time="500" event="click" :immediate="true">
  <button @click="toDoSth($event, 1)">click me</button>
</Debounce>

これでDebounceコンポーネントのパッケージが完成しました.
参照先:
最後にこの兄たちの原帖を添付します.https://juejin.im/post/5c2dc7a9e51d4573c8491e77