디바운싱
디바운싱 브라우저 성능을 높이기 위해 불필요한 시간 소모적인 계산을 줄이는 것뿐입니다. 일부 기능이 특정 작업을 실행하는 데 더 많은 시간이 걸리는 시나리오가 있습니다. 예를 들어 검색창 전자상거래 웹사이트에서.
브리핑
사용자가 "Tutorix 학습 키트"를 원한다고 가정해 보겠습니다. . 그는 검색창에 제품의 모든 문자를 입력합니다. 각 문자를 입력한 후 Api 호출은 필요한 제품을 얻기 위해 브라우저에서 서버로 발생합니다. "Tutorix 연구 키트"를 원하기 때문에 사용자는 브라우저에서 서버로 17번의 API 호출을 해야 합니다. 수백만 명의 사람들이 수십억 개의 Api를 호출하여 동일한 검색을 할 때 . 따라서 한 번에 수십억 개의 API를 호출하면 확실히 브라우저 성능이 느려집니다. . 이 단점을 줄이기 위해 디바운싱 사진에 나옵니다.
이 시나리오에서는 디바운싱 두 키 입력 사이의 시간 간격(예:2초)을 설정합니다. 두 키 입력 사이의 시간이 2초를 초과하면 Api 호출만 발생합니다. 이 2초 동안 사용자는 Api가 호출하는 문자를 줄여 최소한 일부 문자를 입력할 수 있습니다. API 호출이 줄어들었기 때문에 브라우저 성능이 향상됩니다. 디바운싱 모든 키 입력에 대한 기능 업데이트.
예시 요약
다음 예에서는 버튼이 이벤트 리스너에 연결되어 있습니다. 디바운스 를 호출합니다. 함수. 바운스 함수에는 2개의 매개변수가 제공되며, 하나는 함수이고 다른 하나는 숫자(시간)입니다. 이름에서 알 수 있듯이 디바운스 를 호출하는 타이머가 선언되었습니다. 특정 시간 이후에 기능합니다.
디바운스 버튼을 클릭하면 경고 상자가 열리고 메시지가 표시됩니다. 기능은 매번 업데이트되므로 지연 시간(2초) 전에 버튼을 클릭하면 초기 타이머가 지워지고 새로운 타이머가 시작됩니다. 이 작업을 수행하려면 clearTimeOut() 기능을 사용합니다.
예
<html>
<body>
<input type = "button" id="debounce" value = "Debounce">
<script>
var button = document.getElementById("debounce");
var debounce = (func, delay) => {
let Timer
return function() {
const context = this
const args = arguments
clearTimeout(Timer)Timer= setTimeout(() =>
func.apply(context, args), delay)
}
}
button.addEventListener('click', debounce(function() {
alert("Hello\nNo matter how many times you" +
"click the debounce button, I get " +"executed once every 2 seconds!!")}, 2000));
</script>
</body>
</html> 위의 기능을 실행하면 다음 버튼이 표시됩니다.
버튼을 클릭하고 2초 동안 기다리면 다음 경고 상자가 출력으로 표시됩니다.
출력
