#vue# vue で手ぶれ補正とスロットルを使用してクリックの繰り返しを防止します (ソース コード付き)

手ぶれ補正スロットリングとは何ですか?

機能手ぶれ補正 (デバウンス):

これは、一定期間内にアクションが継続的かつ頻繁にトリガーされた場合、アクションは 1 回だけ実行されます。つまり、アクションが呼び出されてから n ミリ秒後にアクションが実行されることを意味します (スクロールなど)。イベント、フォームの繰り返し送信、ページの調整が必要な場合に一般的なページ サイズ変更イベント）により、イベント処理関数を一定期間内に 1 回だけ実行できます。

機能スロットル:

一定時間内に実行されるオペレーションは一度だけ実行される、つまり実行周期があらかじめ設定されており、アクションが呼び出された時刻が実行周期以上の場合、アクションは実行されます。短期間に多数のトリガーが発生した場合同じイベント（スクロールイベント、入力ボックスのリアルタイム検索など）、関数が一度実行された後、次の新しいサイクルに入る、この機能は指定された期間内に動作しなくなり、この期間が経過するまで再び有効になりません。

なぜ手ぶれ補正スロットルを使用するのでしょうか?

関数スロットル (スロットル) と関数デバウンス (デバウンス) は、どちらも関数の実行頻度を制限して、関数の高いトリガー周波数によって引き起こされる応答速度を最適化するためのもので、トリガー周波数に追いつくことができず、遅延や一時停止アニメーションが発生します。またはフリーズ現象。

手ぶれ補正スロットルを使用するにはどうすればよいですか?

(1) 新しいファイルを作成します。たとえば、utils 配下に新しい common.js ファイルを作成します。

//防抖
export const Debounce = function (fn, t) {
    let delay = t || 200;
    let timer = null;
    return function () {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        fn.apply(this, arguments);
      }, delay);
    }
  }
//节流
  export const Throttle = function (fn, delay = 200) {
    let canRun = true; // 通过闭包保存一个标记
    return function () {
      if (!canRun) return;//在delay时间内，直接返回，不执行fn
      canRun = false;
      setTimeout(() => {
        fn.apply(this, arguments);
        canRun = true;//直到执行完fn,也就是delay时间后，打开开关，可以执行下一个fn
      }, delay);
    };
  }

(2) 使用する必要があるページに手ぶれ補正スロットリングを導入する

import {Debounce,Throttle} from '@/utils/common';//引入防抖和节流
//路径需根据文件所在的位置，进行修改

(3) 使用する必要がある場所 (たとえば、一部のボタン) で、ボタンのクリック イベント上で、手ぶれ補正またはスロットル イベントをバインドする方法

 <el-form-item>
     <el-button type="primary" @click="toFilterData()">查询</el-button>
     <el-button type="info" @click="reset()">重置</el-button>
</el-form-item>

methods: {
  //查询按钮---防抖
  //toFilterData当前点击事件
  //Debounce点击事件绑定防抖的方法
  toFilterData:Debounce(function(val) { //调用防抖
      console.log('不管你怎么点击，我只在2s后触发事件，2s内点击我也要等到2s后再触发事件')
      this.getTabletsIndex();//列表接口
   },2000),


  //查询按钮---节流
  //toFilterData当前点击事件
  //Throttle点击事件绑定节流的方法
  toFilterData:Throttle(function(val) { //调用节流
    console.log('第一次请求马上触发，往后不管你怎么触发，我只在2s后请求,2s内触发我要重    新计算时间的')
    this.getTabletsIndex();//列表接口
  },2000),

}

(4) 効果は以下の通りです。