Vueでのパフォーマンス最適化ジッタとスロットル

vueでのブレ止めとスロットルはどう使いますか?
ジッタ防止と節流概念関数ジッタ防止(debounce):高周波イベントがトリガーされた後、n秒以内の関数は1回しか実行されず、n秒以内の高周波イベントが再びトリガーされた場合、時間を再計算します.
関数スロットル(throttle):高周波イベントがトリガーされますが、n秒以内に1回しか実行されないため、スロットルは関数の実行周波数を希釈します.
関数ジッタ防止(debounce)と関数スロットル(throttle)は、関数の実行頻度を制限するために、関数のトリガ周波数が高すぎることによる応答速度がトリガ周波数に追いつかず、遅延が発生し、偽死またはカートンの現象1、ジッタ防止(debounce)がVueプロジェクトにおけるinputボックスの性能最適化例を最適化するためである.検索機能inputボックスのキーワード検索入力ボックス検索は、最後に要求を送信するのみである

  watch: {
    searchVal (newVal, oldVal) {
      //                 
      //  500ms           
      if (newVal) {
        //    
        //      
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.searchIndex(newVal)
        }, 500)
      }
    }
  },

2.スロットル(throttle)は、一定時間に1回の関数のみをトリガするようにする.遅延呼び出し関数が実行されていないかどうかを判断するのが原理です.

export function throttle(fn,times) {
    var canRun = true; //           
    var times = 500;//           
    return function () {
         //             true，  true return
        if (!canRun) return;
         //      false
        canRun = false;
        //              setTimeout 
        setTimeout(() => { 
        //    setTimeout            true(  )            。
        //                 false，    return 
            fn.apply(this, arguments);
            canRun = true;
        }, times);
    };
}

ジッタ防止とスロットルはmousemove、scroll、resize、inputなどのイベントに使用できます.彼らの違いは、ジッタ防止は連続したイベントサイクルの終了時に1回しか実行されず、スロットルはイベントサイクル内で間隔時間で規則的に複数回実行されることです.
参照関連