자바스크립트에서 디바운싱
장기 실행 작업이 있고 이러한 작업이 애플리케이션 사용자에 의해 자주 실행될 수 있는 위치에 있는 경우가 있습니다. 지속적으로 호출되는 이러한 작업은 웹 응용 프로그램의 성능에 영향을 줄 수 있습니다.
디바운싱은 장기 실행 작업이 너무 자주 실행되지 않도록 하는 기술입니다. 특정 프로그램의 실행을 지연시킵니다.
일반적인 예는 사용자가 입력 필드에 쿼리를 입력할 때마다 실행되는 검색 작업입니다. 작업을 디바운싱한다는 것은 검색 작업을 실행하기 전에 사용자가 특정 시간(일반적으로 밀리초) 동안 입력을 중지할 때까지 기다리는 것을 의미합니다.
여기에 간단한 구현을 작성해 보겠습니다.
function debounce(func, time = 300) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, args), time);
};
}
이제 모의 프로젝트를 만들어 이것이 실제 애플리케이션에서 어떻게 작동하는지 확인할 수 있습니다.
<!-- index.html -->
<html>
<head>
<title>Mock Search Page</title>
</head>
<body>
<label for="search">Enter your search</label>
<input id="search" type="text" name="search" />
<script>
const nameElement = document.querySelector("#search");
function debounce(func, time = 500) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, args), time);
};
}
const debouncedSearchFunction = debounce((event) => {
console.log("querying: " + event.target.value + "....");
});
nameElement.addEventListener("keyup", (event) => {
debouncedSearchFunction(event)
});
</script>
</body>
</html>
위의 코드에서
debounce는 함수를 반환하고 로컬 변수timer를 유지합니다(둘 다 클로저를 형성함). timer는 타이밍을 관리하는 상태와 같은 역할을 합니다.이벤트 리스너 콜백에서
debouce에 의해 반환되는 함수를 호출하고 보시다시피 이 함수의 인수는 func 메서드를 사용하여 [Function.prototype.apply](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) 인수로 전달됩니다.결론
이 기사의 서두에서 언급했듯이 API 끝점에 대한 각 요청이 지불되고 사용자의 작업에 의해 작업이 실행될 수 있는 경우입니다. 작업을 디바운싱하여 시간당 처리량(밀리초) 형식을 생성할 수 있습니다.
저는 최근에 Hackernoon의 Noonies 2022에서 두 부문에 후보로 올랐습니다. 다음 두 링크를 사용하여 지지의 표시로 저(Kayode Oluwasegun)에게 투표할 수 있습니다.
Reference
이 문제에 관하여(자바스크립트에서 디바운싱), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/zt4ff_1/debouncing-in-javascript-1cp6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
