JavaScript에서 디 바운싱이란 무엇입니까?
몇 가지 예는 다음과 같습니다.
원하는 결과를 얻기 위해 일반적으로 코드를 작성하는 방법을 살펴보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Debouncing</title>
</head>
<body>
<input class="search" type="text" placeholder="search"/>
<script src="index.js"></script>
</body>
</html>
let count = 0;
function search(query){
// some api call
console.log("result",count++)
}
document.querySelector(".search").addEventListener("input",(e)=>{
search(e.target.value);
})
위의 예에서 노트북을 검색하면 검색 기능이 6번 호출됩니다. 함수를 호출하는 비효율적인 방법입니다. 그리고 JavaScript에는 매우 비쌉니다.
JavaScript에 비용이 많이 든다는 것이 무엇을 의미하는지 궁금하실 것입니다.
즉, 모든 것을 실행할 단일 호출 스택이 있습니다. 그리고 싱글 쓰레드이기 때문에 불필요한 함수 호출로 쓰레드를 막아선 안됩니다.
하지만 기다려 ...
성능 향상을 위해 불필요한 함수 호출을 어떻게 방지합니까?
여기에서 디바운싱의 개념이 그림에 들어갑니다.
디 바운싱은 브라우저의 성능을 향상시키는 데 사용되는 기술입니다. 시간이 많이 걸리는 작업이 너무 자주 발생하지 않도록 합니다. 즉, 함수가 호출되는 속도를 제한합니다.
디바운싱 기법을 사용하여 위의 코드를 다시 작성해 봅시다.
let count = 0;
function search(query){
// some api call
console.log("result",count++)
}
const magicFunction = debounce(search,300);
function debounce(func, delay){
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func(...args);
}, delay);
};
}
document.querySelector(".search").addEventListener("input",(e)=>{
magicFunction(e.target.value);
});
디 바운싱 기술의 기본 아이디어는 이벤트 중에 함수를 호출하지 않고 이벤트 후에 호출한다는 것입니다.
위의 예에서 명확하게 볼 수 있습니다.
디바운스는 고차 함수(HOF)입니다. 두 개의 매개변수를 받는 첫 번째 매개변수는 함수이고 두 번째 매개변수는 지연입니다.
두 키 입력 사이의 지연이 300ms 미만이면 기능이 실행되지 않고
setTimeout 파괴됩니다. 그리고 지연이 300ms 이상이면 함수만 실행됩니다.이것이 앱의 성능을 향상시키기 위해 디바운싱 기술을 구현하는 방법입니다.
더 많은 블로그 게시물을 보려면 나를 따르십시오.
이 블로그가 도움이 되었는지 알려주세요.
||
Reference
이 문제에 관하여(JavaScript에서 디 바운싱이란 무엇입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aamchora/what-is-debouncing-in-javascript-21om텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
