05. 클로저와 debounce, 커링

debounce

짧은 시간 안에 동일한 이벤트가 많이 발생했을 때, 최적화를 위해서 처음이나 마지막 한 번만 처리하는 것.

var debounce = function (eventName, func, wait){
    var timeoutId = null;
    return function (event){
        var self = this;
        // console.log(this);
        clearTimeout(timeoutId);
        timeoutId = setTimeout(func.bind(self,event), wait);
    };
};
var moveHandler = function (e) {
    console.log('처리');
};
var wheelHandler = function (e) {
    console.log('처리2');
};
document.body.addEventListener('mousemove', debounce('move', moveHandler,500))

debounce함수가 최초 실행될 때는 timeoutId가 null로 초기화된다.

그리고 debounce라는 변수가 3번째 줄 부터의 익명함수로 재할당 된다.

 

따라서 이 다음에 mousemove event가 계속해서 실행되면 이전에 실행된 timeoutId의 동작이 계속해서 취소된다.

wait으로 들어온 500ms가 지나면 비로소 moveHandler함수가 실행이 된다.

 

클로저

함수 a의 변수 v가 있고, 함수 b가 변수 v를 참조하며 외부로 보내질 때, a의 실행컨텍스트가 종료된 이후에도 변수 v가 사라지지 않는 현상. v가 가비지 컬렉터의 수거 대상에서 제외되어 발생한다.

 

위의 debounce 예제에서는 이미 사라진 이전의 debounce 실행 컨텍스트에 있는 eventName, func, wait, timeoutId를 참조할 수 있는 것이 클로저를 이용한 현상이다.

 

커링

함수가 실행될 때마다 새로운 함수를 반환하는데, 그 함수에는 인자를 하나씩만 넣는다.

최후에 실행될 때는 이미 반환되어 죽은 실행 컨텍스트의 인자를 참조할 수 있는데 클로저 현상을 이용한 것이다.

 

커링은 함수 실행을 지연시키고 싶을 때 많이 이용한다.

다양한 인자를 많이 사용해야 할 때, 실행을 지연시키고 그 이전까지의 인자를 변수로 저장하여 사용할 수 있다.