js에서 함수 디바운싱을 구현하는 방법(자세한 튜토리얼)

이 글에서는 주로angular.js와 vue.js의 함수 디바운스(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도 삽입합니다. , 그런 다음:

$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))
}

You' 다시 끝났어!

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

express 빌드 쿼리 서버

js 사용자 정의 트림 기능을 사용하여 양쪽 끝의 공백 삭제

JavaScript 작동 원리

ue에서 모두 선택 및 역선택

자세히 에드 사용 설명 jest는 반응 네이티브 구성 요소를 테스트합니다

데이터 바인딩 및 수집을 구현하려면 vue에서 모두 선택하세요

위 내용은 js에서 함수 디바운싱을 구현하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!