js で関数のデバウンスを実装する方法 (詳細なチュートリアル)

この記事では、angular.js と vue.js の関数 debounce (debounce) の例を主に紹介しますので、参考にしてください。

問題の説明

検索入力ボックスでは、ユーザーが入力をやめた後にのみ、HTTP リクエストの開始などの後続の操作が実行されます。

電子回路を勉強したことのある学生は、ボタンの手ぶれ補正について知っているはずです。原理は同じです。つまり、アクションが n ミリ秒以内に呼び出されると、そのアクションがこの n ミリ秒以内に再度呼び出される場合、実行時間が再計算されます。この記事では、angular.js と vue.js でユーザー入力の手ぶれ補正をそれぞれ実現する方法について説明します。

angular.jsの解決策

複数の呼び出しを容易にするサービスとしてデバウンス関数を記述します:

.factory('debounce', ['$timeout','$q', function($timeout, $q) {
  // The service is actually this function, which we call with the func
  // that should be debounced and how long to wait in between calls
  return function debounce(func, wait, immediate) {
   var timeout;
   // Create a deferred object that will be resolved when we need to
   // actually call the func
   var deferred = $q.defer();
   return function() {
    var context = this, args = arguments;
    var later = function() {
     timeout = null;
     if(!immediate) {
      deferred.resolve(func.apply(context, args));
      deferred = $q.defer();
     }
    };
    var callNow = immediate && !timeout;
    if ( timeout ) {
     $timeout.cancel(timeout);
    }
    timeout = $timeout(later, wait);
    if (callNow) {
     deferred.resolve(func.apply(context,args));
     deferred = $q.defer();
    }
    return deferred.promise;
   };
  };
 }])

メソッドを呼び出し、この関数を使用する必要があるコントローラー/ディレクティブにデバウンスを注入し、$watchも注入します。 、その後:

rree

完了!

Vue.jsでの解決策

まず、パブリック関数ファイルにdebounce

$scope.$watch('searchText',debounce(function (newV, oldV) {
  console.log(newV, oldV);
  if (newV !== oldV) {
    $scope.getDatas(newV);
  }
}, 350));

を登録し、次に、使用する必要があるコンポーネントにdebounceを導入し、作成されたライフサイクルでそれを呼び出します:

export function debounce(func, delay) {
 let timer

 return function (...args) {
  if (timer) {
   clearTimeout(timer)
  }
  timer = setTimeout(() => {
   func.apply(this, args)
  }, delay)
 }
}

You'終わった！

上記は私があなたのためにまとめたものです。 related Article：respress query serversuseserver

usejsカスタムトリム機能の両端でスペースを削除するためのカスタムトリマjest の使用説明は、反応ネイティブコンポーネントをテストします

vue ですべてを選択してデータバインディングと取得を実装します

以上がjs で関数のデバウンスを実装する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。