디바운싱

일정 시간내에 여러번 호출 된 함수들 중 마지막 함수만 호출하도록 하는 것

주로 ajax 검색에 사용됩니다.

예제 코드

// JS 파일
let timer = null;
document.querySelector('#input').addEventListener('input', function(e){
	if(timer) clearTimeout(timer);
	timer = setTimeout(() => { console.log(e.target.value) }, 500);
});

// HTML
<input id='input' />
<script src="path" type="text/javascript"></script>

500ms 마다 setTimeout 이 실행되어 id가 timer에 할당되는데 500ms 이내에 이벤트가 발생되면 전에 담겼던 timer가 clearTimeout에 의해 제거됩니다. 그래서 500ms 이내에 함수를 호출하게되면 취소되고 마지막 이벤트 발생 후 500ms 가 지나면 setTimeout 콜백 함수가 실행됩니다.

쓰로틀링

함수를 한 번 호출하면 일정 시간동안 호출되지 않도록 하는 것

주로 스크롤을 올리거나 내릴 때 사용합니다.

// HTML
<input id='input' />
<script src="path" type="text/javascript"></script>

//JS
let timer = null;
document.querySelector('#input').addEventListener('input', function(e){
	if(!timer){
		timer = setTimeout(() => {
			console.log(e.target.value);
			timer = null;
		}, 500)
	}
})

timer 가 있는 경우는 이벤트가 발생해 setTimeout 을 실행했을 경우입니다. 500ms 이후 timer 는 제거되므로 500ms 이내에 함수가 호출될 경우 무시되고 500ms 이후에 함수 호출시 실행됩니다. 즉, 함수를 한 번 호출하면 설정한 일정 시간동안 함수를 다시 호출해도 무시됩니다.

쓰로틀링과 디바운싱이 필요한 이유

아무것도 적용하지 않았을 때의 예시를 먼저 살펴보겠습니다.

document.querySelector('#input').addEventListener('input', function(){
	console.log(e.target.value);
})

키를 하나 입력할 때 마다 이벤트가 발생하게 되는데 10 번 연속으로 입력하면 10번이 발생됩니다.

만약 이걸 유료 API를 호출하는 콜백함수가 있다고 할 경우 이벤트가 발생될 때마다 콜백함수가 실행될 것이고 작업이 수없이 많이 발생하게 될 것입니다. 이로인해 브라우저가 버벅이게 될 수 있습니다.

querySelector

Document.querySelector() 는 제공한 선택자 또는 뭉치와 일치하는 문서 내 첫 번째 Element를 반환하고 없으면 null을 반환합니다.

querySelectorAll

Docuement.querySelectorAll() 은 지정된 선택자(selector) 그룹에 일치하는 엘리먼트를 리스트로(NodeList) 반환합니다. selector은 여러개가 될 수 있습니다. 예)querySelectorAll(’input’, ‘.box’)

var container = document.querySelector("#test");
var matches = container.querySelectorAll("div.highlighted > p");

getElementById

Document.getElementById() 는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾아 Element 를 반환합니다. id는 문서내에 유일하기 때문에 빠르게 찾을 때 유용합니다.

var eleId = document.getElementById(id);

getElementByClassName

Document.getElementByClassName() 은 지정한 셀렉터(class 명)와 일치하는 문서내의 요소 중 class가 일치하는 것들을 찾아 반환한다. HTMLCollection으로 반환됨

차이점

querySelectorAll, getElementByName, .. 등 메서드는 NodeList 로 반환되는 반면 ClassName은 HTML Collection 으로 반환된다.

부가 내용

innerHTML: 태그 안에 HTML 과 텍스트 전부 조회된다. 할당할 경우 HTML 마크업 넣어 추가할 수 있다.

innerText: 말 그대로 텍스트 문구만 조회하고 할당할 경우 텍스트로 인식한다.

학습할 키워드

• setTimeout, clearTimeout, setInterval, clearInterval