집 > 기사 > 웹 프론트엔드 > JavaScript 조절 기능에 대한 자세한 설명 Throttle

JavaScript 조절 기능에 대한 자세한 설명 Throttle

黄舟원래의: 2017-03-07 14:35:471109검색

브라우저 DOM 이벤트에는 사용자 작업에 따라 지속적으로 트리거되는 일부 이벤트가 있습니다. 예: 브라우저 창 크기 조정(resize), 브라우저 페이지 스크롤(scroll), 마우스 이동(mousemove). 즉, 사용자가 이러한 브라우저 작업을 트리거할 때 해당 이벤트 처리 메서드가 스크립트에 바인딩되어 있으면 이 메서드가 지속적으로 트리거됩니다.

이것은 우리가 원하는 것이 아닙니다. 이벤트 처리 방식이 상대적으로 크고, DOM 연산이 복잡하고, 이러한 이벤트가 지속적으로 발생하면 성능 손실이 발생하고 사용자 경험이 저하될 수 있기 때문입니다(UI 응답). 속도가 느리거나 브라우저가 정지되는 등). 따라서 일반적으로 해당 이벤트에 지연 실행 로직을 추가하겠습니다.

보통 우리는 이 함수를 구현하기 위해 다음 코드를 사용합니다:

var COUNT = 0;
function testFn() { console.log(COUNT++); }
// 浏览器resize的时候
// 1. 清除之前的计时器
// 2. 添加一个计时器让真正的函数testFn延后100毫秒触发
window.onresize = function () {
    var timer = null;
    clearTimeout(timer);

    timer = setTimeout(function() {
        testFn();
    }, 100);
};

주의깊은 학생들은 위의 코드가 실제로 잘못되었음을 알게 될 것입니다. 이것은 초보자들이 저지르는 문제입니다. setTimeout 함수 반환 값. 상대 전역 변수에 저장해야 합니다. 그렇지 않으면 크기가 조정될 때마다 새 타이머가 생성되어 우리가 보낸 효과를 얻을 수 없습니다.

그래서 코드를 수정했습니다:

var timer = null;
window.onresize = function () {
    clearTimeout(timer);
    timer = setTimeout(function() {
        testFn();
    }, 100);
};

코드는 이제 정상이지만 새로운 문제가 있습니다. 전역 변수 타이머가 생성됩니다. 이것이 우리가 보고 싶지 않은 것입니다. 이 페이지에 타이머라고도 불리는 다른 기능이 있으면 이전에 다른 코드가 충돌할 것입니다. 이 문제를 해결하려면 JavaScript의 언어 기능인 클로저 클로저를 사용해야 합니다. 관련 지식이 있는 독자는 MDN에 가서 알아볼 수 있습니다. 수정된 코드는 다음과 같습니다.

/**
 * 函数节流方法
 * @param Function fn 延时调用函数
 * @param Number delay 延迟多长时间
 * @return Function 延迟执行的方法
 */
var throttle = function (fn, delay) {
    var timer = null;

    return function () {
        clearTimeout(timer);
        timer = setTimeout(function() {
            fn();
        }, delay);
    }
};
window.onresize = throttle(testFn, 200, 1000);

타이머를 내부에 넣고 지연 처리 기능을 반환하기 위해 폐쇄 기능(throttle throttling)을 사용합니다. 타이머 변수는 외부에 노출되지만, 내부 지연 기능이 실행될 때에도 타이머 변수에 접근할 수 있습니다.

물론, 이런 쓰기 방식은 초보자가 이해하기 어렵습니다. 이해하기 위해 쓰기 방식을 바꿀 수도 있습니다.

rree

이해해야 할 주요 사항은 다음과 같습니다. Throttle 호출된 후 반환된 함수는 onresize가 트리거될 때 호출해야 하는 실제 함수입니다

이제 이 방법은 완벽에 가까운 것처럼 보이지만 실제 사용에서는 그렇지 않습니다. 예를 들면 다음과 같습니다.

사용자가 지속적으로 브라우저 창의 크기를 조정하면 지연 처리 기능은 한 번도 실행되지 않습니다

그래서 우리는 또 다른 기능 추가 필요: 사용자가 크기 조정을 실행하면 특정 시간 내에 한 번 이상 실행되어야 합니다. 따라서 이 판단 조건은 현재 시간이 걸릴 수 있습니다. milliseconds, 매번 이 함수 호출은 마지막 호출 시간에서 현재 시간을 뺀 다음 그 차이가 특정 기간보다 크면 직접 트리거되도록 결정합니다. 시간 초과는 계속 사용됩니다.

다음 코드에서 주목해야 할 점은

이전 변수의 역할은 타이머의 역할과 유사합니다. 둘 다 마지막 식별과 기록을 기록합니다. 상대 전역 변수여야 합니다
로직 흐름이 "최소 한 번 트리거" 논리를 따르는 경우 함수 호출을 현재 시간으로 재설정해야 합니다. 이는 간단히 말해서 다음을 의미합니다. 이전 시간과 다음 시간을 기준으로 사실 현재

var throttle = function (fn, delay) {
    var timer = null;

    return function () {
        clearTimeout(timer);
        timer = setTimeout(function() {
            fn();
        }, delay);
    }
};

var f = throttle(testFn, 200);
window.onresize = function () {
    f();
};

연습:

창을 스크롤할 때 제한 시나리오를 시뮬레이션합니다. 예를 들어, 사용자가 페이지를 아래로 스크롤하면 실행을 조절해야 합니다. DOM 위치 계산 및 DOM 요소의 지속적인 조작이 필요한 기타 작업과 같은 일부 메서드

전체 코드는 다음과 같습니다.

/**
 * 函数节流方法
 * @param Function fn 延时调用函数
 * @param Number delay 延迟多长时间
 * @param Number atleast 至少多长时间触发一次
 * @return Function 延迟执行的方法
 */
var throttle = function (fn, delay, atleast) {
    var timer = null;
    var previous = null;

    return function () {
        var now = +new Date();

        if ( !previous ) previous = now;

        if ( now - previous > atleast ) {
            fn();
            // 重置上一次开始时间为本次结束时间
            previous = now;
        } else {
            clearTimeout(timer);
            timer = setTimeout(function() {
                fn();
            }, delay);
        }
    }
};

효과를 테스트하기 위해 두 가지 사례를 사용합니다. 최소한 트리거 최소 매개변수를 추가하고 추가하지 않은 경우:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>throttle</title>
</head>
<body>
    <p style="height:5000px">
        <p id="demo" style="position:fixed;"></p>
    </p>
    <script>
    var COUNT = 0, demo = document.getElementById(&#39;demo&#39;);
    function testFn() {demo.innerHTML += &#39;testFN 被调用了 &#39; + ++COUNT + &#39;次<br>&#39;;}

    var throttle = function (fn, delay, atleast) {
        var timer = null;
        var previous = null;

        return function () {
            var now = +new Date();

            if ( !previous ) previous = now;
            if ( atleast && now - previous > atleast ) {
                fn();
                // 重置上一次开始时间为本次结束时间
                previous = now;
                clearTimeout(timer);
            } else {
                clearTimeout(timer);
                timer = setTimeout(function() {
                    fn();
                    previous = null;
                }, delay);
            }
        }
    };
    window.onscroll = throttle(testFn, 200);
    // window.onscroll = throttle(testFn, 500, 1000);
    </script>
</body>
</html>

사례 1은 다음과 같이 동작합니다. testFN이 호출되지 않습니다. 페이지 스크롤 프로세스 중에(중지할 수 없음) 중지되면 한 번 호출됩니다. 즉, 실행됩니다. throttle에 있는 것은 이고 마지막 은 setTimeout입니다. 그림(원본 gif 보기):

사례 2는 다음과 같이 작동합니다. 페이지 스크롤 프로세스 중에(중지할 수 없음) testFN은 처음에는 500ms의 지연으로 실행되고(적어도 지연 로직에서) 적어도 500ms마다 실행됩니다. 효과는

그림과 같습니다. 지금까지 우리가 달성하고자 하는 효과는 기본적으로 완료되었습니다. 독자는 이것이 가리키는 함수, 반환 값 저장 등과 같은 몇 가지 후속 보조 최적화를 스스로 알아낼 수 있습니다.

인용문

테스트 코드 http://jsbin.com/tanuxegija/edit
전체 버전 코드 http:/ /jsbin.com/jigozuvuko
디바운스 VS 스로틀 https://github.com/dcorb/debounce-throttle

위 내용은 JavaScript 조절 기능인 Throttle에 대한 자세한 설명입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!

성명：

이전 기사：자바스크립트 비정상 질문 44개 분석 상세 소개다음 기사：자바스크립트 비정상 질문 44개 분석 상세 소개

JavaScript 조절 기능에 대한 자세한 설명 Throttle

인용문

관련 기사