<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Debounce & Throttle - 차이점과 활용 예제</title>
<style>
body {
font-family: Arial, sans-serif;
height: 200vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #f4f4f4;
}
h1, h2 {
text-align: center;
}
.box {
width: 250px;
height: 100px;
background-color: lightblue;
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
font-size: 18px;
font-weight: bold;
border-radius: 8px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
.content {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
ul {
padding-left: 20px;
}
</style>
</head>
<body>
<div class="content">
<h1>Debounce & Throttle - 차이점과 활용 예제</h1>
<p>웹 개발에서 이벤트 처리는 중요한 요소이며, Debounce와 Throttle은 성능 최적화를 위한 핵심 기법입니다.</p>
<h2>Debounce란?</h2>
<p>Debounce는 특정 이벤트가 연속적으로 발생할 때, 마지막 이벤트만 실행되도록 지연시키는 기법입니다.</p>
<ul>
<li><strong>사용 예:</strong> 검색창 자동완성, 입력 필터링</li>
<li><strong>이유:</strong> 너무 많은 API 요청 방지</li>
</ul>
<h2>Throttle란?</h2>
<p>Throttle은 일정 시간 간격마다 함수가 실행되도록 제한하는 기법입니다.</p>
<ul>
<li><strong>사용 예:</strong> 스크롤 이벤트, 버튼 클릭 방지</li>
<li><strong>이유:</strong> 과도한 연산으로 인한 성능 저하 방지</li>
</ul>
<h2>실제 예제</h2>
<p>📌 마우스를 움직이면 Debounce 적용, 스크롤하면 Throttle 적용</p>
<div class="box" id="debounce-box">Debounce</div>
<div class="box" id="throttle-box">Throttle</div>
</div>
<script>
/**
* Debounce 함수
* 지정된 시간(delay) 동안 호출이 없을 경우 마지막 호출만 실행됨.
*/
function debounce(func, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, args), delay);
};
}
/**
* Throttle 함수
* 지정된 간격(limit) 내에서 최초 호출 후 일정 시간 동안 추가 호출을 막음.
*/
function throttle(func, limit) {
let lastCall = 0;
return function(...args) {
const now = Date.now();
if (now - lastCall >= limit) {
lastCall = now;
func.apply(this, args);
}
};
}
// DOM 요소 가져오기
const debounceBox = document.getElementById("debounce-box");
const throttleBox = document.getElementById("throttle-box");
// Debounce 적용: 마우스 이동 시 텍스트 변경
const logDebounce = debounce(() => {
debounceBox.textContent = "Debounced!";
setTimeout(() => debounceBox.textContent = "Debounce", 500);
}, 1000);
// Throttle 적용: 스크롤 시 텍스트 변경
const logThrottle = throttle(() => {
throttleBox.textContent = "Throttled!";
setTimeout(() => throttleBox.textContent = "Throttle", 500);
}, 1000);
// 이벤트 리스너 추가
document.addEventListener("mousemove", logDebounce);
document.addEventListener("scroll", logThrottle);
</script>
</body>
</html>