created by aha00a at 2018-11-08
last modified by aha00a at 2023-11-22
revision: 6

JavaScript Debounce

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var originalThis = this;
        var originalArguments = arguments;
        if(timeout)
            clearTimeout(timeout);

        if (immediate && !timeout)
            func.apply(originalThis, originalArguments);

        timeout = setTimeout(function(){
            timeout = null;
            if (!immediate)
                func.apply(originalThis, originalArguments)
        }, wait)
    }
}

$('body').mousemove(debounce(function() {
	$('.mousemove').text(parseInt($('.mousemove').text()) + 1 );
}, 500));

$('body').click(debounce(function() {
	$('.click').text(parseInt($('.click').text()) + 1 );
}, 500, true));

--2018-11-08

fixed to keep original this. --2019-12-23

연속되게 계속 발생하는 이벤트(Scroll, MouseMove, Resize 등)를 효율적으로 처리하기 위해 사용하는 기법

  • Throttle - 최초 발생시 보내고(immediate), 지정한 시간동안 무시하고, 이후 다시 호출
  • Debounce - 이벤트 발생시 시간을 재고, 지정한 시간동안 재발생시, 다시 시간을 재고, 지정한 시각이 지나면 마지막에 보냄.

위 코드는 고릿적이라 IE까지 대응하고, throttle과 debounce를 immediate로 한번에 쓸 수 있는 코드. 세월이 많이 흘러서 지원하는 #Library가 많다. 라이브러리를 쓰는 것을 추천하나, 이것 때문에 라이브러리를 추가하고 싶지 않다면 위 코드를 사용하면 됨 --2023-11-22

3. See Also

3.2. Adjacent Pages