콜백 함수
콜백 함수는 파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수
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 |
댓글