Javascript에서 기능 조절 및 흔들림 방지 구현(코드 포함)

이 문서의 내용은 Javascript에서 기능 조절 및 흔들림 방지(코드 포함)를 구현하는 것에 대한 내용입니다. 필요한 친구가 참고할 수 있기를 바랍니다.

함수 조절(throttle)

용어 설명

함수 조절(throttle): 지속적으로 함수 실행, 일정한 간격으로 함수 실행

사용 시나리오

마우스 이동, mousemove 이벤트
DOM 요소 동적 위치 지정, 창 개체 크기 조정 및 스크롤 이벤트
등등...

기능 조절(throttle) 단순 구현

    function throttle(fn, delay) {
        var last; // 上次执行的时间
        var timer; // 定时器
        delay || (delay = 250); // 默认间隔为250ms
        return function() {
            var context = this;
            var args = arguments;
            var now = +new Date(); // 现在的时间
            if (last && now < last + delay) { // 当前距离上次执行的时间小于设置的时间间隔
                clearTimeout(timer); // 清除定时器
                timer = setTimeout(function() { // delay时间后，执行函数
                    last = now;
                    fn.apply(context, args);
                }, delay);
            } else { // 当前距离上次执行的时间大于等于设置的时间，直接执行函数
                last = now;
                fn.apply(context, args);
            }
        };
    }

기능 디바운스(debounce)

용어 설명

기능 디바운스(debounce): 유휴 시간은 다음보다 크거나 같아야 합니다. a 특정 호출 메소드는 값에 도달한 경우에만 실행됩니다

사용 시나리오

텍스트 입력 키다운 이벤트
잠깐...

함수 디바운스는 구현이 간단합니다

    function debounce(fn, delay) {
        var timer; // 定时器
        delay || (delay = 250); // 默认空闲时间250ms
        return function() {
            var context = this;
            var args = arguments;
            clearTimeout(timer); // 清除定时器
            timer = setTimeout(function() { // delay时间后，执行函数
                fn.apply(context, args);
            }, delay);
        };
    }

위 내용은 Javascript에서 기능 조절 및 흔들림 방지 구현(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!