자바스크립트 디바운스
디바운스 기능 드라이브는 선택기로 인스턴스화할 수 있는 명시적 방법이 아닙니다. 정의는 타이머, 반환된 함수 및 컨텍스트로 구성됩니다.
이 명시적인 디바운스 외에 jQuery 디바운스, lodash 디바운스 및 underscore.js 디바운스가 있습니다. 시각화를 위해 다음 섹션에서 예제를 설정합니다.
jQuery debounce의 경우 사용 사례가 더 이상 사용되지 않을 수 있습니다. 아직 온라인에서 사용할 수 있는 광범위한 토론과 데모가 있지만 jQuery의 이전 버전과 최신 버전은 출력을 제공하지 않습니다. 오히려 구현에서는 $.debounce 기능이 존재하지 않는다고 말합니다.
그러나 여기서는 debounce 메커니즘과 lodash debounce 방법의 기본 구현을 사용하여 두 가지 예를 살펴보겠습니다. lodash는 underscore.js 규칙에 대해 고려됩니다.
그래서 우리는 lodash debounce에 초점을 맞출 것입니다. 이 함수의 기본 시스템에도 불구하고 일부 다른 매개변수를 사용할 수도 있습니다.
이것은 더 나은 성능을 위한 것이기도 합니다. lodash debounce를 더 잘 이해하려면 이 포털로 리디렉션할 수 있습니다.
JavaScript 디바운스 기능 메커니즘
디바운스 기능을 사용하는 기본적인 필요성은 원하지 않는 동작을 줄여서 기능 지연을 제한하는 것입니다. 이제 이것이 어떻게 지연으로 더 나은 성능을 만드는지에 대한 의문이 생길 수 있습니다.
자, 창의 경고 방법을 고려해 봅시다. 경고에 해당하는 트리거 버튼을 클릭하면 해당 버튼이 실행됩니다.
그러나 사용자가 신속하게 클릭을 차례로 반복하면 경고 메시지가 고르지 않은 미리보기를 제공하거나 하나의 호출 동작만 제공하는 것을 볼 수 있습니다. 이것은 좋은 성능이 부족하기 때문입니다.
모든 클릭 또는 트리거 뒤에는 신호의 수락 시간이 따르고 나머지 동작은 그에 따라 실행됩니다. 검색 상자에 입력할 때 키를 누를 때마다 업데이트된 필터링 결과가 제공됩니다.
이것은 또한 “당신이 나를 아무리 클릭하거나 나를 트리거하더라도 지연하도록 요청받은 시간 이후에만 작동할 것입니다"라고 말하는 이 디바운스 기능의 구현입니다. 따라서 누군가 갑자기 버튼을 클릭하면 언급된 시간 지연 후에 기능이 표시됩니다.
여기 인스턴스에는 함수가 트리거될 때마다 지워지는 타이머가 있습니다. 그리고 다른 클릭이 지시될 때 시간 지연이 클릭 간의 차이보다 크면 함수는 시간 카운트를 다시 재설정합니다.
마지막 클릭을 따라 시간 계산을 시작하고 작업을 미리 봅니다.
코드 조각:
<html>
<body>
<button id="db">Debounce</button>
<script>
var btn = document.getElementById("db");
const debounce = (func, delay) => {
let Timer
return function() {
clearTimeout(Timer)
Timer
= setTimeout(() => func.apply(this, arguments), delay)
}
}
btn.addEventListener('click', debounce(function() {
alert("Executing after a sec!!")
}, 1000));
</script>
</body>
</html>
출력:
따라서 디바운스 기능은 시간 지연과 컨텍스트라는 두 가지 매개변수를 사용합니다. 호출할 때마다 시간 지연이 지워지고 새로 시작됩니다.
따라서 특정 시간 지연이 보장되고 트리거 함수에 대한 사용자 동작에도 불구하고 내부 디바운스는 시간 프레임으로 제한되는 작업 중인 함수에 불과한 디바운스된 함수를 반환합니다.
더 나은 성능을 위해 lodash debounce 방법 사용
이 지정된 lodash 라이브러리에는 함수, 지연 및 다른 선택적 매개변수를 사용하는 미리 정의된 _.debounce 메서드가 있습니다. 따라서 명확한 시간 설정 제한을 명시적으로 정의할 필요가 없습니다.
오히려 그것은 추상화되어 있고 우리는 그것을 호출함으로써 디바운싱 기능을 수행할 수 있습니다.
코드 조각:
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<button id="db">Debounce</button>
<script>
var db = document.getElementById("db");
var debounce = _.debounce(function(){
alert("Wait for a sec!")
}, 1000, {'leading':false})
db.addEventListener('click', debounce);
</script>
</body>
</html>
출력:
