angular.js と vue.js で関数 debounce を実装する

この記事では主にangularjsの実装機能を紹介し、angularjsに関する問題と解決策を提供します

問題の説明

検索入力ボックス内でのみ。ユーザーが入力を停止すると、HTTP リクエストの開始などの後続の操作が実行されます。

電子回路を勉強したことのある学生は、ボタンの手ぶれ補正について知っているはずです。原理は同じです。つまり、アクションが n ミリ秒以内に呼び出されると、そのアクションがこの n ミリ秒以内に再度呼び出される場合、実行時間が再計算されます。この記事では、angular.js と vue.js でユーザー入力の手ぶれ補正をそれぞれ実現する方法について説明します。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトAngularJS 開発マニュアル にアクセスして学習してください)

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;
      };
    };
  }])

Call メソッドを使用します。必要に応じて、この関数のコントローラー/ディレクティブに debounce を挿入し、$watch も挿入して、次のようにします。

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

これで完了です。

Vue.js での解決策

まず、パブリック関数ファイルに debounce を登録します

export function debounce(func, delay) {
  let timer

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

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

created() {
  this.$watch('searchText', debounce((newSearchText) => {
    this.getDatas(newSearchText)
  }, 200))
}

これで完了です。

引用

1. https://stackoverflow.com/questions/29771011/angularjs-watch-with-debounce
2. https://www.cnblogs.com/fsjohnhuang/p/4147810.html

さて、この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイト AngularJS ユーザー マニュアル にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。

以上がangular.js と vue.js で関数 debounce を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。