모든 Javascript 앱에는 이벤트 조절이 필요합니다!!!

16056 단어 todayilearnedcodingwebdevjavascript
검색창에서 키를 누를 때마다 API 호출이 필요했나요? 스크롤 또는 크기 조정 이벤트를 어떻게 최적화할 수 있습니까? 이러한 질문은 StackOverflow, GitHub 등과 같은 플랫폼에서 일반적입니다.

이러한 질문은 애플리케이션의 최적화 단계 중간에 있거나 끝없는 API 호출 루프에 빠져 있을 때만 Google에 문의하세요. 내가 맞아?

모든 Google 검색은 Javascript 프로그래밍의 두 가지 주요 용어인 스로틀링 및 디바운싱을 가리키고 있습니다.

우리는 이것들을 배울 필요가 있었습니까? 예! 거의 모든 웹 애플리케이션은 성능을 최적화하기 위해 이러한 기술이 필요합니다.

Debouncing 및 Throttling 기술은 함수가 실행할 수 있는 횟수를 제한하는 데 사용됩니다.

API 호출이 서버에 요청될 때마다 필드에 각 문자를 입력할 때 장바구니 애플리케이션의 검색 표시줄을 생각해 보십시오. 브라우저에서 네트워크 섹션을 보면
목록에 대기 중인 API 호출이 여러 개 있는 것 같습니다.

생각해봐? 귀하의 응용 프로그램에 대해 괜찮습니까 ?? 진짜 아니야!!!
그런 다음 질문이 생깁니다. 검색 표시줄에서 API 호출을 줄이는 방법...예!! 마침내, 당신은 그것을 구글링하고 모든 검색 결과는 반복적으로 말한다- 쓰로틀링과 디바운싱 버디를 사용하라...!!!

이벤트 제한



Throttling is a technique in which no matter how many times users fires the event, the attached function will be executed only at a regular interval.



실제로 스로틀링은 Javascript의 setTimeout 함수를 사용하여 생성할 수 있는 간단한 기술입니다.

setTimeout 함수


setTimeout는 브라우저에서 제공하는 webAPI로 Javascript에서 스케줄링 기능으로 사용됩니다. 이 함수를 사용하여 일정 시간 동안 이벤트 또는 함수 호출을 지연시킬 수 있습니다.

구문은 다음과 같습니다.

let timerId = setTimeout(callbackFunction, timeToDelay);

여기서 callbackFunction은 timeToDelay 기간 후에 실행해야 하는 코드를 정의합니다.
setTimeout 함수는 setTimeout에 대한 호출로 생성된 타이머를 고유하게 식별하는 양의 정수 값인 timerId를 반환합니다. 이 값은 시간 초과를 위해 clearTimeout에 전달될 수 있습니다.

Remember, the timerId is the key point in throttling.



//Example of setTimeout
const showMessage = function() {
console.log('show this message after 2 seconds');
};

let timerId = setTimeout(showMessage, 2000); //the showMessage function will call after 2000 ms and show the message.

구현



스로틀링은 간격에 한 번 첨부된 함수 호출을 실행합니다. 아래 주어진 예에서 스크롤 이벤트는 스로틀링 구현 유무에 관계없이 계산됩니다.

스로틀링 없이



샘플index.html 파일은 다음과 같습니다.

<head>
 <style>
        div {
            border: 1px  solid  black;
            width: 300px;
            height: 200px;
            overflow: scroll;
        }
    </style>  
</head>

<body>
    <div  id="div-body">
        <p style="background-color: red; height: 700px">This is line 1</p>
        <p style="background-color: blue; height: 700px">This is line 2</p>
        <p style="background-color: green; height: 700px">This is line 3</p>
        <p style="background-color: yellow; height: 700px">This is line 4</p>
    </div>

    <p>No of times event fired</p>
    <p id='show-api-call-count'></p>

    <script src= "script.js" />
</body>

javascriptscript.js 파일은 다음과 같습니다.


let timerId, eventCallCount;
const divBodyDom = document.getElementById('div-body');

divBodyDom.addEventListener('scroll', function() {
    const eventCallCountDom = document.getElementById('show-api-call-count');
    eventCallCount= eventCallCount|| 0;

    eventCallCount+= 1;
    eventCallCountDom.innerHTML = eventCallCount;

});

결과:

제한 사용



샘플index.html 파일은 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Throttling in Javascript</title>

    <style>
        div {
            border: 1px  solid  black;
            width: 300px;
            height: 200px;
            overflow: scroll;
        }
    </style>

</head>
<body>
    <div  id="div-body">
        <p style="background-color: red; height: 700px">This is line 1</p>
        <p style="background-color: blue; height: 700px">This is line 2</p>
        <p style="background-color: green; height: 700px">This is line 3</p>
        <p style="background-color: yellow; height: 700px">This is line 4</p>
    </div>

    <p>No of times event fired</p>
    <p id='show-api-call-count'></p>

    <p>No of times throttling executed the method</p>
    <p id="debounc-count"></p>

    <script src= "script.js" />
</body>
</html>

javascriptscript.js 파일은 다음과 같습니다.

let timerId, apiCallCount, throttlingDomCount;
const divBodyDom = document.getElementById('div-body');

function makeAPICall() {
    const throttlingDom = document.getElementById('debounc-count');

    throttlingDomCount = throttlingDomCount || 0;
    throttlingDomCount += 1;

    throttlingDom.innerHTML = throttlingDomCount;

}

function throttleFunction(func, delay) {
    if(timerId) {
        return;
    }

    timerId = setTimeout(function() {
        func();
        timerId = undefined;
    }, delay);
}

divBodyDom.addEventListener('scroll', function() {
    const apiCallCountDom = document.getElementById('show-api-call-count');
    apiCallCount = apiCallCount || 0;

    apiCallCount = parseInt(apiCallCount) + 1;
    apiCallCountDom.innerHTML = apiCallCount;

    throttleFunction(makeAPICall, 200);
});

결과:



설명



여기서 throttle() 함수는 makeAPICall()을 처리하고 간격 값을 200으로 전달합니다.
따라서 throttle()은 200ms 간격으로 makeAPICall() 함수를 트리거하도록 배열합니다.

throttle() 함수 내에서 요점은 timerId입니다.

timerId가 undefined 인 경우 setTimeout 함수가 트리거되고 timerId가 반환됩니다.

timerId가 유효한 경우 하나setTimeout 함수가 완료를 위해 보류 중임을 의미합니다. 맞습니까? 그래서 아무것도 하지 않고 돌아갑니다. 즉, timerId가 설정된 경우에만 makeAPICall() 함수가 실행됩니다. 이는 각setTimeout 기능이 완료된 후에만 발생합니다.

통과 지연을 setTimeout 함수의 지연 매개변수로 설정하여 200ms의 일정한 간격으로 makeAPICall() 함수를 실행할 수 있습니다.

또한 timerId를 undefined로 재설정하는 것을 잊지 마십시오. 그러면 다음 이벤트 트리거만 원하는 대로 수행됩니다.

정말 간단합니다..네??

결론



개발자는 Event throttling 개념을 사용하여 창 크기 조정, 반복 버튼 클릭, 빠른 검색 유형, 마우스 이동 이벤트 등의 시간 간격으로 이벤트 실행을 제어할 수 있습니다.

이벤트가 완료된 후에만 어떤 작업을 수행할 수 있는 방법은 무엇입니까? - Debouncing() 사용. 내 다음 블로그를 기다려!!!
EXTJS의 vtype에서 사용할 시간 형식 검사에 대한 JS 함수를 수집합니다.
ExtJs2.0 학습 시리즈(1) --Ext.MessageBox

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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