Vue2.xはコンポーネントに防振を使用しています

1.防振機能を宣言します

  Debounce(fn, t){
    
    
      let delay = t || 500;
      let timer = null;
      return function () {
    
    
          if (timer) {
    
    
              clearTimeout(timer);
          }
          timer = setTimeout(() => {
    
    
              fn.apply(this, arguments);
          }, delay);
      }
  }

2.防振機能を導入

import {
    
    Debounce} from '@/utils/common.js'

3.防振機能を使用します

<template>
  <div class="about">
    <Input @on-change="handlerChange"></Input>
  </div>
</template>
<script>
import {
    
    Debounce} from '@/utils/common.js'
export default {
    
    
 methods:{
    
    
   handlerChange:Debounce(function(val){
    
    //val 为handlerChange函数的参数
     //业务代码
   })
 }
}
</script>

注：Debounceのコールバック関数はarrow関数を使用できません。これは、arrow関数が内部のthisをメソッドレイヤーのthisにポイントするため、これがvueインスタンスを指さないため、this.xxxが未定義であることを意味します。