Skip to content

Latest commit

 

History

History
147 lines (125 loc) · 4.13 KB

41장_타이머.md

File metadata and controls

147 lines (125 loc) · 4.13 KB
  • 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>
  • 스로틀(throttle)

    • 이벤트가 연속적으로 일어나도 일정 시간 간격으로 이벤트 핸들러 최대 한번 호출

    • 무한 스크롤 UI 이벤트 구현에 유용하게 사용됨

      <!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            width: 300px;
            height: 300px;
            background-color: rebeccapurple;
            overflow: scroll;
        }

        .content {
            width: 300px;
            height: 1000vh;
        }
    </style>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="content"></div>
</div>
<div>
    일반 이벤트 핸들러 scroll 이벤트 처리 횟수:
    <span class="normal-count">0</span>
</div>
<div>
    스크롤 이벤트 핸들러 scroll 이벤트 처리 횟수:
    <span class="throttle-count">0</span>
</div>
<script>
    const $container = document.querySelector('.container');
    const $normalCount = document.querySelector('.normal-count');
    const $throttleCount = document.querySelector('.throttle-count');

    const throttle = (callback, delay) =>{
        let timerId;
        return event => {
            if(timerId) return;
            timerId = setTimeout(()=>{
                callback(event);
                timerId = null;
            }, delay, event)
        }
    }

    let normalCount = 0 ;
    $container.addEventListener('scroll', ()=>{
        $normalCount.textContent = ++normalCount;
    })

    let throttleCount = 0;
    $container.addEventListener('scroll', throttle(()=>{
        $throttleCount.textContent = ++throttleCount;
    }, 100))

</script>
</body>
</html>