[자바스크립트 특집] 노트. - 떨림 방지.

1. 페이지 떨림 방지
주로 사건이 빈번하게 발생하는 문제를 해결해야 한다.

    

    


    var count = 1;
    var container = document.getElementById('container');
    
    function getUserAction() {
        container.innerHTML = count++;
    };
    
    container.onmousemove = getUserAction;

위 코드를 실행하면 마우스가div를 지나갈 때 자주 호출됩니다 getUserAction 방법.실제 프로젝트에서 예를 들어 카운트다운은 사용되는데 카운트다운이 된 후에 계속 당첨 인터페이스를 호출하여 너무 많은 자원을 낭비하게 한다.
떨림 방지 원리
이벤트 트리거를 n초 후에 실행합니다. n초 안에 이 함수를 트리거하면 새로운 이벤트 이벤트를 기준으로 n초 후에 실행합니다. 즉, 이벤트를 트리거한 후 n초 안에 트리거하지 않고 실행해야 합니다.
코드 시도 1 직접 쓰기

function debounce(){
    let timeout ;
    return function(func,wait){
        clearTimeout(timeout);
        timeout = setTimeout(func,wait);
    }
}
container.onmousemove = debounce(getUserAction,1000)

이 때, 당신이 어떻게 이동하든지, 1000ms 내에 터치하지 않고 이벤트를 실행합니다.
코드 시도 2 this 대상 고려
상기 코드getUserAction 방법console.log(this)에서 debounce 방법을 사용하지 않았을 때this의 값은 다음과 같다.

debounce 방법을 사용하면 this 윈도 대상을 가리키기 때문에 우리는 this를 정확한 대상을 가리켜야 한다.수정:

function debounce(){
    let timeout ;
    return function(){
        let context = this;
        clearTimeout(timeout);
        timeout = setTimeout(function(){
            func.apply(context);
        },wait);
    }
}

이렇게 하면 정상을 가리킨다.
코드 시도 3 이벤트 대상 고려
JavaScript는 이벤트 처리 함수에서 이벤트 객체event 객체를 제공하여 코드를 수정합니다.

function getUserAction(e) {
    console.log(e);
    container.innerHTML = count++;
};

debounce 함수를 사용하지 않으면 MouseEvent 객체가 인쇄됩니다.debounce 함수를 사용하면 인쇄undefined됩니다.코드를 다음과 같이 수정합니다

function debounce(func, wait) {
    let timeout;

    return function () {
        let context = this;
        let args = arguments;

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

요구 사항 변경: 즉시 실행 필요
요청은 이벤트가 정지될 때까지 기다리지 않고 함수를 즉시 실행한 다음 n초간 정지될 때까지 기다렸다가 다시 실행합니다.즉 immediate 파라미터를 추가하여 즉시 실행 여부를 판단한다.

function debounce(func,wait,immediate){
    let timeout,result;
    return function(){
        let context = this;
        let args = arguments;
        
        if(timeout) clearTimeout(timeout);
        if(immediate){
            let callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            },wait)
            if(callNow) func.apply(context,args);
        }else{
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

취소 기능 추가
취소debounce 함수의 기능을 실현하고 싶습니다. debounce의 시간 간격은 10초이고 immediate는true입니다. 그러면 저는 10초를 기다려야 사건을 다시 촉발할 수 있습니다. 지금 저는 버튼을 눌러서 떨림 방지를 취소하고 다시 촉발하면 바로 실행할 수 있기를 바랍니다.

//    
function debounce(func, wait, immediate) {

    var timeout, result;

    var debounced = function () {
        var context = this;
        var args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            //        ，    
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) result = func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
        return result;
    };

    debounced.cancel = function() {
        clearTimeout(timeout);
        timeout = null;
    };

    return debounced;
}

cancel 함수 사용:

var count = 1;
var container = document.getElementById('container');

function getUserAction(e) {
    container.innerHTML = count++;
};

var setUseAction = debounce(getUserAction, 10000, true);

container.onmousemove = setUseAction;

document.getElementById("button").addEventListener('click', function(){
    setUseAction.cancel();
})

원문을 읽다