자바스크립트에서 디바운싱(debouncing)에 대해 들어본 적이 있습니까?

6828 단어 reactwebdevjavascript
여기 계시다면 웹 앱 성능을 향상시키는 데 사용되는 디바운싱 방법을 알고 있거나 배우고 싶을 것입니다.

디바운스의 목적



디바운싱은 함수가 실행될 수 있는 횟수를 제한하는 데 사용되는 기술입니다.

어떻게 작동합니까?.



디바운스 함수는 함수가 마지막으로 호출될 때까지 대기하고 미리 정의된 시간이 지나면 또는 이벤트 실행이 비활성화되면 실행됩니다.

이해가 안 되세요? 꽉 앉아 위의 진술이 정확히 무엇을 의미하는지 봅시다 .


디브리핑

전자 상거래 앱의 검색 표시줄을 예로 들어 보겠습니다.
사용자가 "school bag"을 검색하려고 한다고 가정하면 사용자는 검색창에 한 글자씩 입력하기 시작합니다. 각 문자를 입력한 후 사용자 검색 텍스트에 대한 제품을 가져오기 위해 Api 호출이 발생합니다. 이 예에서는 브라우저에서 서버로 10번의 호출이 수행됩니다. 수백만 명의 사용자가 수십억 개의 Api 호출을 통해 동일한 검색을 수행하는 시나리오를 생각해 보십시오. 한 번에 엄청난 수의 Api를 만들면 분명히 성능이 느려질 것입니다.


구조를 위해 디 바운싱.

이 시나리오를 모의할 수 있습니다. 키를 누를 때마다 검색 상자를 만들어 getData Api를 호출합니다. 여기서는 실제 Api를 호출하지 않지만 콘솔에서 텍스트를 기록할 수 있습니다.
HTML 파일

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <script src="./src/index.js"></script>
  </head>

  <body>
    <div id="app">
      <input type="text" id="userInput" />
    </div>
  </body>
</html>


우리의 자바스크립트 파일.

const inputBox = document.querySelector("#userInput");

function getData() {
  console.log("get Data api called ");
}

inputBox.onkeyup = getData;


결과:

여기에서 정상적인 실행이 각 키 업 이벤트에 대해 함수 호출을 수행한다는 것을 알 수 있습니다. 함수가 Api 호출과 같은 무거운 작업을 수행하는 경우 서버 부하 및 웹 앱 성능과 관련하여 비용이 많이 드는 작업이 될 수 있습니다. 디바운싱을 사용하여 이를 개선하는 방법을 찾아봅시다.

업데이트된 자바스크립트 코드

const inputBox = document.querySelector("#userInput");

function getData() {
  console.log("get Data api called ");
}

const debounce = (fn, delay) => {
  let timer
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => fn(...args), delay)
  }
}
const debouncedFunction = debounce(getData, 300);

inputBox.addEventListener("keyup", () => {
  debouncedFunction();
});


(덕분에
주석 섹션에서 최신 자바스크립트를 사용하여 간단한 구현을 제안합니다).
결과


결과는 바로 와우!! 우리는 서버와 더 나은 성능의 웹앱에서 많은 부하를 줄일 수 있었습니다.

코드를 살펴보겠습니다. 디바운스된 함수는 일반적으로 setTimeout()가 있는 다른 함수를 반환합니다. 위의 코드에서 먼저 clearTimeout()로 타이머를 지운 다음 setTimeOut()로 타이머를 다시 설정한 이유가 궁금할 수 있습니다. 이것은 지연을 얻기 위한 것입니다. 즉, 반복되는 호출은 결국 타이머를 지우므로 두 함수 호출 간의 차이가 이 경우 300밀리초인 지연의 차이보다 클 때까지 api 호출이 발생하지 않으므로 사용자가 차이가 있는 경우 입력을 시작할 때 마지막으로 입력한 문자와 입력할 다음 문자 사이의 시간은 함수가 호출되는 지연 시간보다 큽니다.

우리가 디바운싱으로 달성한 것을 스로틀링으로도 달성할 수 있다고 주장할 수 있습니다. 잘못된 것은 아니지만 이 두 가지에는 약간의 미묘한 차이와 다른 사용 사례가 있습니다.

스로틀링이 무엇인지 궁금하시다면 함수 호출 횟수를 줄이는 기술이기도 하지만 다른 블로그 게시물에 대한 차이점과 사용 사례를 유지해 보겠습니다.

내가 너희들에게 디바운싱을 분명히 했으면 좋겠어!! , 수정 사항이나 제안 사항이 있으면 댓글을 달아주세요.

그때까지 행복한 Javascripting ❤
피스 아웃 ✌️
spark 집단 환경 구축
HDFS 고가용성 완전 분산 구축

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage