본문 바로가기
Elice SW 2/TIL

DAY 16 - TIL

by 자이구 2022. 4. 27.

콜백 함수

콜백 함수는 파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수

let names = ["jaeku", "jonghyun", "sunbee"];

names.forEach(function(x){
	console.log(x)
});

/* output
jaeku
jonghyun
sunbee
*/

​setTimeout(){}

setTimeout(() => {console.log("5초후에 실행됩니다")}, 5000);

 

setTimeout(함수,시간) 메서드는 뒤에 특정 시간이 만료된 후 함수나 지정된 코드 조각을 실행하는 타이머를 설정

setTimeout은 비동기 함수이므로 실행 순서와 상관없이 지정한 시간이 만료될 때 결과값을 반환


Debouncing

 

연속으로 호출되는 함수들 중에 마지막에 호출되는 함수(또는 제일 처음 함수)만 실행하도록 하는 것

 

1, 7, 8의 이벤트가 실행되는 것을 볼 수 있는데, 디바운스에 지정한 delay time 동안 사용자가 이벤트를 발생시키지 않았기 때문입니다. delay time보다 짧은 시간 내에 이벤트가 발생한  2, 3, 4, 5, 6 은 이벤트가 발생하지 않으며, 이것이 바로 디바운스의 특징

출처: https://kellis.tistory.com/142 [Flying Whale]

 

<html>
	<body>
    	<input type="text" id="inputName">
    <body>
</html>


<script>
document.querySelector('input').addEventListener('input', function(e) {
    console.log('입력 내용: ', e.target.value);
});
</script>

 

input 이벤트가 발생할 때, 하나 하나 입력되는 순간 콜백 함수가 실행

좀 더 무거운 작업을 하는 경우, 성능 상의 이슈와 유료 API를 사용한다고 가정하면 API 사용 비용이 상당함

 

let timer;

document.querySelector('#input').addEventListener('input', function(e) {
    if(timer) {
        clearTimeout(timer); -> timer의 setTimeout을 취소시킴
    }
    timer = setTimeout(function() {
        // 실행 코드 내용
    }, 200);
});

 

이벤트가 발생 할 때마다 이전에 설정해둔 내용을 clear시키고 다시 새로운 timer를 설정

설정해둔 시간 내에 이벤트가 다시 발생하지 않으면 이벤트 발생이 끝난 것으로 판단하고 실행할 코드를 실행


Throttling

스로틀은 일정 시간 내에 한 번만 함수를 호출하도록 하는 기술

디바운스와 가장 큰 차이점이라면 정해진 시간 간격 내에 반드시 최대 한 번 함수가 호출

 

디바운스와 달리 스로틀은 사용자가 이벤트를 일으킨 점선 박스 시간 동안 기다렸다가, 가장 마지막에 호출된 이벤트를

발생시킵니다.  그래서 디바운스와 달리 1, 4, 7, 8의 이벤트가 발생하게 되는 것입니다.

 

출처: https://kellis.tistory.com/142 [Flying Whale]

let timer;
document.querySelector('.body').addEventListener('scroll', function (e) {
  if (!timer) {
    timer = setTimeout(function() {
      timer = null;
      // 실행할 코드 내용
    }, 200);
  }
});

 

'Elice SW 2 > TIL' 카테고리의 다른 글

DAY 18 - TIL  (2) 2022.04.29
DAY 17 - TIL  (1) 2022.04.28
DAY 15 - TIL  (0) 2022.04.26
DAY 14 - TIL  (0) 2022.04.25
DAY 13 - TIL  (1) 2022.04.22

댓글