JavaScript 조절 기능에 대한 자세한 설명 Throttle-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

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

黄舟

Mar 07, 2017 pm 02:35 PM

브라우저 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)를 참고해주세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

JavaScript 엔진 : 구현 비교Apr 13, 2025 am 12:05 AM

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AM

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

Python 또는 JavaScript가 더 좋습니까?Apr 06, 2025 am 12:14 AM

Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.

See all articles