클로저: 디바운싱

4752 단어 webdevjavascriptbeginners
이 시리즈의 이전 기사에서 메모이제이션이라고 하는 클로저의 실제 사용을 살펴보았습니다. 이 포스트에서 우리는 디바운스 기능을 통해 작동하는 클로저를 간략하게 살펴볼 것입니다.

디바운스는 특정 시간 동안 함수 처리를 지연시킵니다. 양식, 버튼 또는 마우스 이벤트와 같은 항목에 매우 유용할 수 있습니다. 가능한 많은 사용자 입력이 있을 때마다. 게임 용어를 사용하는 "쿨다운"기간을 도입하여 DOM의 빠른 화재 재렌더링을 방지하는 데 도움이 될 수 있습니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Practice</title>
</head>
<body>
    <button id="button">Click Me</button>

    <script>
        const debounce = (func, delay) => {
            let inDebounce
            return function () {
                const context = this
                const args = arguments
                clearTimeout(inDebounce)
                inDebounce = setTimeout(() => func.apply(context, args), delay)
            }
        }

        const button = document.getElementById('button')
        button.addEventListener('click', debounce(() => {
            console.log('Hey! It is', new Date().toUTCString())
        }, 3000))
    </script>
</body>
</html>


여기서 내 목표는 디바운스를 작성하는 방법을 가르치는 것이 아닙니다. 많은 리소스가 있습니다(여기서 내가 한 것처럼 일반 디바운스 기능을 문자 그대로 복사하여 붙여넣을 수 있습니다). 더군다나 나는 당신이 거기에서 폐쇄를 발견하고 그 "아하"순간을 갖기를 바랍니다. 이 기능에 대한 가이드를 원하거나 더 자세히 알고 싶다면 내가 사용한 source을 확인하십시오.

여기서 핵심은 클로저 관점에서 우리의 inDebounce 변수입니다. 클로저로서 반환된 함수는 변수가 타임아웃을 실행하는지 여부를 "기억"합니다. 아직 시간 초과에 있는 동안 실행하면 clearTimeout 되므로 다시 시작됩니다.

작동 중인 클로저의 또 다른 인스턴스입니다.

이전에 디바운스를 사용한 적이 있습니까? 매우 유용한 다양한 변형 또는 사용 사례가 있습니까?
왜 나의 개발 환경이 가장 좋은가
10진 이진 기본 템플릿 (비트 연산)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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