JavaScript의 debounce() 함수

1. JavaScript에서 Debounce 용어 이해하기
2. JavaScript에서 debounce() 함수 사용

이 기사에서는 JavaScript debounce() 함수를 활용하여 애플리케이션의 성능을 향상시키는 방법을 설명합니다.

JavaScript에서 Debounce 용어 이해하기

JavaScript는 디바운싱 기술을 사용하여 브라우저 성능을 향상시킵니다. 디바운스는 스로틀과 관련이 있으며 둘 다 온라인 애플리케이션의 성능을 향상시킵니다.

그럼에도 불구하고 그들은 많은 맥락에서 관찰됩니다. 우리가 고려하는 모든 것이 최종 상태일 때 디바운스가 사용됩니다.

예를 들어, 사용자가 입력을 완료할 때까지 자동 완성 검색 결과의 검색을 지연시키고 있습니다. 활용하기에 이상적인 도구는 모든 중간 상태의 속도를 제어하려는 경우 스로틀입니다.

JavaScript에서 debounce() 함수 사용

다음은 함수를 디바운스하는 방법을 이해하는 데 도움이 되는 코드 그림입니다.

function debounce(jss, timeout = 3000) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      jss.apply(this, args);
    }, timeout);
  };
}

function userInput() {
  console.log('Changing data');
}

const workonChange = debounce(() => userInput());

코드 실행

여기에서 무슨 일이 일어나고 있습니까? debounce()는 두 가지 기능을 수행하는 고유한 함수입니다.

• 타이머 변수 범위 할당
• 특정 시간에 실행되도록 기능 설정

이것이 어떻게 작동하는지 보기 위해 텍스트 입력을 사용한 첫 번째 사용 사례를 살펴보겠습니다.

debounce() 함수는 방문자가 첫 글자를 쓰고 키(타이머)를 놓을 때 clearTimeout을 사용하여 처음에 타이머를 재설정합니다. 예약된 것이 없기 때문에 현재 단계가 필요하지 않습니다.

userInput() 함수는 3000밀리초(3초) 후에 호출될 것으로 예상됩니다. 그러나 방문자가 계속 입력하면 각 필수 릴리스는 debounce() 기능을 다시 트리거합니다.

모든 호출은 타이머를 재설정해야 합니다. 즉, 이전 userInput() 준비를 취소하고 향후 3000밀리초의 새 시간으로 다시 예약해야 합니다. 방문자가 3000밀리초 이내에 키 입력을 유지하는 한 계속됩니다.

이전 일정이 지워지지 않기 때문에 userInput()이 호출됩니다.

출력:

setTimeout 메소드는 s, h, i 또는 v를 입력할 때 계속 지연되는 것을 볼 수 있습니다( 호출된 함수 userInput에도 불구하고). 입력하는 동안 3초 동안 일시 중지하면 주요 기능인 Changing data가 인쇄됩니다.

디바운싱은 모든 작업이 아니라 설정된 일시 중지 시간 후에만 함수를 호출하여 응용 프로그램 속도를 향상시킵니다. 그러나 이 작업을 직접 수행할 필요는 없습니다.

예를 들어 debounce 기능은 Lodash에서 사용할 수 있습니다. 기고자는 debounce 기능을 개선하기 위해 Lodash와 같은 라이브러리를 개선했습니다.

우리는 이 기사에서 디바운싱이 무엇인지, 왜 유용한지, JavaScript에서 디바운싱을 수행하는 방법에 대해 논의했습니다.