프론트엔드 면접 대비 (2)

디바운싱 & 쓰로들링

디바운싱

연달아 호출되는 함수 중 가장 마지막(혹은 가장 처음) 함수만 호출되도록 한다.

예를 들어 검색어를 적을 때, 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/

성능덕후를 위한 자바스크립트 코딩 패턴(중급)