카테고리 없음
프론트엔드 면접 대비 (2)
Dahee Joy Cha
2019. 11. 16. 09:02
디바운싱 & 쓰로들링
디바운싱
연달아 호출되는 함수 중 가장 마지막(혹은 가장 처음) 함수만 호출되도록 한다.
예를 들어 검색어를 적을 때, search를 누르기전 이미 검색 결과에 대해 조회가 되야한다고 치자.
키보드는 연속 타이핑이기때문에, 마지막으로 검색어를 완성했을 때에만 결과를 보여주고자 한다.
(그렇지 않으면 각 input에 대해 ajax 전송이 이뤄지므로 비효율적이다.)
let timer;
document.getElementById('jsInput').addEventListener('input', function (e) {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(function () {
console.log(e.target.value);
},2000);
});
쓰로들링
이벤트에 대해 함수를 등록한다. 해당 함수의 실행이 끝나기 전에 다른 함수의 호출은 막는다
좋은 코딩패턴
삼항연산자
let isRainy = true;
let whatToWear = isRainy? "raincoat":"dress";
console.log("let's get ", whatToWear);
삼항연산자 2 : 두 개 이상의 변수
const isMonday = true;
const isLate = true;
let speed = "";
let coffee = "";
isMonday && isLate ? (speed = "Run", coffee = "skip")
:
(speed = "walk", coffee = "Latte");
console.log(speed, coffee);
소스
쓰로틀링과 디바운싱 https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa
성능향상을 위한 코딩패턴 https://joshua1988.github.io/web-development/javascript/javascript-best-practices/
성능덕후를 위한 자바스크립트 코딩 패턴(중급)
joshua1988.github.io