[자바스크립트 js] setTimeout / setInterval / addEventListner / 비동기 함수

  setTimeout

• 특정 함수의 실행을 원하는 시간만큼 뒤로 미루기 위해 사용하는 함수.
• 설정한 밀리세컨즈만큼의 시간이 경과했을 때 콜백이 실행된다.
• 1000 밀리세컨즈 = 1초
• setTimeout(콜백, 시간)
• 아래 코드에서 2초가 지난 뒤에 'b'가 출력이 된다.

console.log('a');
setTimeout(() => { console.log('b'); }, 2000);
console.log('c');

 

 

 

 

  setInterval

• 특정 콜백을 일정한 시간 간격으로 실행하도록 등록하는 함수.
• Interval : 간격
• setInterval(콜백, 시간)
• 아래 코드에서 2초 간격으로 'b'가 반복 출력된다.

console.log('a');
setInterval(() => { console.log('b'); }, 2000);
console.log('c');

 

 

 

 

  addEventListner

• addEentListener(이벤트 이름, 콜백)

사용자가 웹 페이지에서 어떤 버튼 등을 클릭 했을 때 실행(콜백)하고 싶은 함수가 있다면

1. 해당 DOM 객체의 onclick 속성에 함수를 설정한다.

btn.onclick = function (e) { // 해당 이벤트 객체가 파라미터 e로 넘어온다.
  console.log('DO or DIE!');
};

// 또는 arrow function 형식
btn.onclick = (e) => {
  console.log('DO or DIE');
};

 

2. 해당 DOM 객체의 addEventListener 메소드의 파라미터로 전달한다.

btn.addEventListener('click', function (e) { // 해당 이벤트 객체가 파라미터 e로 넘어온다.
  console.log('DO or DIE');
});

// 또는 arrow function 형식
btn.addEventListener('click', (e) => {
  console.log('DO or DIE');
});