JavaScript (36) 썸네일형 리스트형 callback vs promise vs async & await const delay = (wait, callback) => { setTimeout(callback, wait); } const sleep = (wait) => { return new Promise((resolve) => { setTimeout(resolve, wait); }); } 1. callback함수 function runCallback() { resetTitle(); //1. 제목 초기화 playVideo(); //1. 비디오 재생 delay(1000, () => { pauseVideo(); //2. 1초 후, 비디오 멈춤 displayTitle(); //2. 비디오멈추고, 제목 표시 delay(500, () => { highlightTitle(); //3. 0.5초 후, 제목 강조 delay(.. 타이머 API ( setTimeout, setInterval, clearInterval) 1. setTimeout(callback, millisecond) - 일정 시간 후에 함수 실행 - arguments : 실행할 callback함수, callback함수 실행 전 기다려야 할 시간(밀리초) - return값 : 임의의 타이머 ID setTimeout(() => {console.log('1초 후 실행'}, 1000) //1초 후, 콘솔창에 '1초 후 실행' 뜬다. 2. setInterval(callback, millisecond) - 일정 시간을 가지고 함수를 반복적으로 실행 - arguments : 실행할 callback함수, 반복적으로 함수를 실행시키기 위한 시간간격(밀리초) - return값 : 임의의 타이머 ID setInterval(() => {console.log('1초마다 실행.. 비동기 함수의 순서를 제어하는 방법 3. async & await //Producer function gotoCodestates(){ return new Promise ((resolve, reject) => { setTimeout(() => {resolve('1. go to codestates')}, 100) }) } function sitAndCode(){ return new Promise ((resolve, reject) => { setTimeout(() => {resolve('2. sit and code')}, 100) }) } function eatLunch(){ return new Promise ((resolve, reject) => { setTimeout(() => {resolve('3. eat lunch')}, 100) }) } function goToBe.. 비동기함수의 순서를 제어하는 방법 2. Promise Callback Hell을 벗어나기 위한 방법 2가지 존재. 1. Promise 2. async / await 이번 시간에는 'Promise'에 대해 알아보자. 자바스크립트에서 제공하는 '비동기'를 간편하게 처리할 수 있도록 도와주는 object(즉, 객체). Promise is a JavaScript object for 'asynchronous' operation. 자바스크립트 안에 내장되어 있는 Object. 비동기적인 것을 수행할 때 콜백함수 대신에 유용하게 쓸수있는 object. 정해진, 장기간의 기능을 수행하고 나서, 정상적으로 기능이 수행되어졌다면 성공의 message와 함께 처리된 결과값을 전달해 준다. 생성자는 매개변수로 "실행 함수(executor)"를 받습니다... 이전 1 2 3 4 5 다음