비동기호출과 함수 메소드

이동환·2020년 8월 19일
1

TIL

목록 보기
15/74

비동기호출 (asynchronously)

: 비동기 호출이란, 간단하게 말하면 실행했을때, 즉시 실행되는것이 아닌 필요할때 실행되어진다고 말할 수 있다. 예를 들어, 음식을 주문하는것과 같다. 음식을 주문하면, 몇분 후에 음식을 받는것과 같다.

비동기 호출의 사례들

  • DOM Element의 이벤트 핸들러 (마우스 클릭, 키보드 조작(key up, keydown 등) & 페이지로딩(DOMContentLoaded 등))
  • 타이머 API & API 애니메이션 (requestAnimationFrame)
  • 서버에 자원 요청 및 응답 (fetch API (날씨API, 버스도착API 등 이미 작성되어 있는 서버 openAPI / 특정 서버에 URI로 요청하고 응답받기) & AJAX (XHR))

타이머 API에 대해 좀 더 알아보자.

이 비동기 호출을 잘 보여주는 함수가 자바 스크립트에서 존재한다.
첫번째로, setTimeout 이다.

1. setTimeout(callback,time, (args...))

time이라는 인자를 받아, 그 시간 뒤에 function을 실행하는것이다. 여기서 function의 인자도 받을 수 있는데, 그 인자들은 args 로 time 인자 다음에 들어오게 된다.

2.setInterval(callback, millisecond)
일정 시간의 간격을 가지고 함수를 반복적으로 실행
3.clearInterval(timerId)
반복 실행중인 타이머를 종료

함수 메소드

:함수를 실행 시키는 방법

call,apply and bind

1.apply 사용법
: apply이는 다수의 인자들을 배열에 담아 사용 할 수 있다.

let arr = [1,2,3];
Math.max.apply(null, arr); // 3
// or
let arr = {'Lee','Donghwan'};
Array.prototype.filter.apply(arr.[morethanFive]);
//Array객체의 (prototype에서) filter함수(동사)를 apply한다. 
//주어는 arr이다(this값).

call 사용법
: call 역시 apply와 같이 인자를 받아, 함수를 실행시킬 수 있다. 그러나 call은 배열이 아닌 하나의 인자만 받는다.

let morethanFive = function(str){
  return str.length>5;
}
let arr = {'Lee','Donghwan'};
Array.prototype.filter.call(arr.morethanFive);
//Array객체의 (prototype에서) filter함수(동사)를 call한다. 
//주어는 arr이다(this값).
//이와같이 함수 메소드는 유사배열에서도 사용이 가능하다.
profile
UX를 개선하는것을 즐기고 새로운것을 배우는것을 좋아하는 개발자입니다.

0개의 댓글