디바운싱과 쓰로틀링을 혼합하는 경우의 예시입니다.

예를 들어, 사용자가 검색어를 입력하는 도중에는 300ms 간격으로 검색 결과를 가져오는 쓰로틀링을 적용합니다. 그리고 사용자가 타이핑을 중단한 후 500ms 이내에 추가 입력이 없으면, 그 시점에서의 검색어로 최종 검색을 수행하는 디바운싱을 적용합니다.

let lastCall = 0;
let timeoutId;

function searchApi(query) {
	console.log(`Searching for : ${query}`)
}

function handleSearch(event) {
	const now = Date.now();
	const timeSinceLastCall = now - lastCall;
	const throttleTime = 300;
	const debounceTime = 500;

	// 쓰로틀링
	if(timeSinceLastCall > throttleTime) {
		searchApi(event.target.value);
		lastCall = now;
	}

	// 디바운스
	clearTimeout(timeoutId);
	timeoutId = setTimeout(() => {
		searchApi(event.target.value);
	}, debounceTime);)
}

document.querySelector('input').addEventListener('input', handleSearch);

위 코드에서 handleSearch함수는 입력 이벤트가 발생할 때 마다 호출됩니다.

1. 먼저 timeSinceLastCall 값을 계산하여 마지막 API 호출로부터 시간을 확인했습니다.
2. 이 시간이 throttleTime보다 큰 경우, 즉 300ms 이상 지난 경우 API를 호출합니다.
3. 동시에 디바운싱을 위해 이전의 setTimeout을 clear하고 새로운 setTimeout을 설정합니다. 따라서 사용자가 입력을 중단하면 500ms 후에 디바운싱에 의해 API가 한 번 더 호출됩니다.

이 방식으로 사용자가 타이핑 하는 도중에는 일정 간격으로 결과를 받아올 수 있고, 타이핑을 완전히 중단한 후에는 최종 검색어로 정확한 결과를 가져올 수 있습니다.