Skip to content

41. 타이머

Jump to bottom
fireyw edited this page Jan 16, 2022 · 1 revision
  • setTimeout
    • delay 시간 후에 단 한번 동작하는 타이머를 생성한다
const timeoutId = setTimeout(func|code[,delay, param1, param2,...]);
  • func : 타이머가 만료된 뒤 호출될 콜백 함수
  • delay: delay시간만큼 지연된 후 동작하는 타이머를 생성
  • param1:콜백 함수에 전달해야할 인수가 존재할 경우 전달
//1초뒤에 실행
setTimeout(()=>console.log('hi'),1000);

setTimeout(name=>console.log(`hi! ${name}.`),1000, 'Lee');
  • clearTimeout: 호출 스케쥴링을 취소한다
//setTimeout함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id를 반환
const timerId=setTimeout(()=>console.log('hi'),1000);

clearTimeout(timerId);
  • setInterval
    • delay 시간만큼 반복동작하는 타이머 생성
    • 타이머가 취소될 때까지 계속된다
let count = 1;

//clearInterval 타이머id를 통해 타이머를 취소 할 수 있다
const timeoutId = setInterval(() => {
    console.log(count);
    if (count++ === 5) clearInterval(timeoutId);
}, 1000)
  • 디바운스(debounce)
    • 짧은 시간 간격으로 발생하는 이벤트를 그룹화하여 마지막에 한번만 이벤트 핸들러가 실행되게 함
    • 쇼핑몰 연관 검색어 추천에서 사용됨
    • Underscore의 debounce함수나 Lodash의 debounce함수를 추천
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<div class="msg"></div>
<script>
    const $input = document.querySelector('input');
    const $msg = document.querySelector('.msg');
//debounce 함수는 tiemrId를 기억하는 클로저 반환
    const debounce = (callback, delay )=>{
        let timerId;

        return event =>{
            if(timerId) clearTimeout(timerId)
            timerId=setTimeout(callback, delay, event)
        }
    }

//debounce 함수가 반환하는 클로저가 이벤트 핸들러로 등록된다
//300ms보다 짧은 간격으로 input 이벤트가 발생하면 호출 안하고
//300ms동안 이벤트가 더이상 발생하지 않으면 한 번만 호출된다
    $input.oninput= debounce(e=>{
        $msg.textContent = e.target.value;
    }, 300)
</script>

</body>
</html>
Clone this wiki locally