자 바스 크 립 트 의 떨 림 방지 와 절 류 를 이야기 해 보도 록 하 겠 습 니 다.

목차

JavaScript 떨 림 방지 와 절 류

문제 복원

떨 림 방지

떨 림 방지 가 뭐야

사용 장면

절 류

절 류 는 무엇 입 니까

사용 장면

JavaScript 떨 림 방지 및 스로틀
문제 복원
우 리 는 먼저 코드 를 통 해 흔히 볼 수 있 는 문 제 를 복원 합 니 다.

    
    




    
        window.onload = function(){
            //             
            let norInput = document.getElementById('normal');
            
            let ajax = content=>{
                console.log('ajax:' + content);
            }

            norInput.addEventListener('keyup',e=>{
                ajax(e.target.value)
            })
            // console.log(debounce()())
        }
    

    

위의 프로그램 에 서 는 문제 가 없어 보이 지만 사용자 가 문 자 를 입력 할 때마다 백 엔 드 에 요청 을 합 니 다. 이것 은 사용자 일 뿐 입 니 다. 만약 에 많은 사용자 가 똑 같은 조작 을 하면 서버 에 큰 부담 을 주 는 것 과 다 름 없습니다.
이런 문 제 를 해결 하 는 데 는 여러 가지 적절 한 방법 이 있 지만 다음 에 말 하고 자 하 는 것 은 JavaScript 중의 과 조작 에 관 한 것 이다.
떨 림 방지
떨 림 방지 가 뭐야?
사용자 가 한 번 의 이벤트 n 초 를 촉발 한 후에 리 셋 함 수 를 실행 하고, 반복 적 으로 촉발 하면 다시 시간 을 잽 니 다. 의 논리 에 따라 다음은 코드 를 통 해 시 뮬 레이 션 을 한다.

    
    




    
        window.onload = function(){
            
            let norInput = document.getElementById('normal');
            //         ajax  
            let ajax = content=>{
                console.log('ajax:' + content);
            }

            //       
            let debounce = (fn,delay) => {
                return function(args){
                    let that = this;
                    let param = args;
                    //             timmer       
                    clearTimeout(fn.id);
                    fn.id = setTimeout(function(){
                        fn.call(that,param)
                    },delay)
                }
            }

            let deb_func = debounce(ajax,500)
            norInput.addEventListener('keyup',e=>{
                deb_func(e.target.value)
            })
            
        }
    

    

위의 demo 가 실 행 된 후에 사용자 가 입력 을 멈 춘 후에 야 요청 ajax 을 할 수 있 습 니 다. 사용자 가 계속 입력 하면 타 이 머 는 계속 갱신 되 고 이 과정 에서 요청 이 발생 하지 않 습 니 다. 사용자 가 입력 을 멈 출 때 까지 시간 을 재 고 시간 이 되면 요청 을 보 낼 수 있 습 니 다.
이렇게 하면 잦 은 전송 요청 으로 서버 에 과도 한 스트레스 를 줄 일 수 있다.
필드 사용

resize 이벤트 나 scroll 이벤트 등 떨 림 방지 로 촉발 횟수 감소

사용자 가 입력 상자 에 자주 입력

절 류
절 류 는 무엇 입 니까?
시간 범 위 를 설정 하고 일정한 시간 범위 내 에서 한 번 에 한 번 만 이벤트 의 리 셋 함 수 를 실행 할 수 있 습 니 다. 즉, 규정된 시간 범위 내 에서 이벤트 가 몇 번 촉발 되 든 한 번 만 리 셋 함 수 를 실행 할 수 있 습 니 다.
우 리 는 click 사건 을 통 해 사고 현장 을 복원 했다.

    
    






let oBtn = document.getElementById('btn');

let ajax = ()=>{
    console.log("ajax    ")
}

oBtn.addEventListener('click',()=>{
    ajax();
})

사용자 가 클릭 할 때마다 요청 을 보 내 고 클릭 이 끊 이지 않 으 며 요청 이 끊 이지 않 습 니 다.와 같다 ， .지루 하 게 계속 클릭 하 는 사람 이 있 으 면 요청 횟수 가 상당 해 질 것 으로 예상 된다.
다음은 우리 가 의 원리 에 따라 실현 한 예시 코드 이다.

    
    




    
        window.onload = function(){
            //      
            let oBtn = document.getElementById('normal');

            //   ajax  
            let ajax = ()=>{
                console.log("ajax    ....")
            }

            //     
            let throttle = (func,wait) =>{
                var timeout ;
                var previous = 0;

                return function(){
                    var _this = this;
                    args = arguments;
                    if(!timeout){
                        timeout = setTimeout(function(){
                            timeout = null;
                            func.apply(_this,args);
                        },wait)
                    }
                }
            }
            let thro_func = throttle(ajax,3000);


            //       
            oBtn.addEventListener('click',()=>{
                thro_func();
            })
        }
    

    

위의 사례 를 통 해 우 리 는 사용자 가 한 번 클릭 한 후에 타 이 머 를 시작 할 수 있 습 니 다. 그 중에서 몇 번 의 사건 이 발생 하 더 라 도 리 셋 을 한 번 만 수행 할 수 있 습 니 다.
물론 절 류 를 실현 하 는 방법 은 타이머 라 는 방안 뿐만 아니 라 시간 스탬프 를 사용 할 수도 있 고 다른 방법 도 안 되 는 것 이 아니다. 본 고의 목적 은 서버 의 압력 을 줄 이 는 두 가지 방법 을 논술 하고 설명 하기 위 한 것 일 뿐이다.
필드 사용

마우스 가 계속 클릭 되 는 경우

페이지 를 무 한 히 불 러 옵 니 다. 사용자 가 스크롤 을 멈 추 는 대신 요청 을 합 니 다

...

다음으로 전송:https://www.cnblogs.com/liujunhang/p/11405851.html