1. setTimeout, setInterval
setTimeout(콜백 함수, ms(1000=1초)) - 넘겨준 함수를 해당 밀리 초 '만큼' 흐른 뒤 호출
clearTimeout(설정된 타임아웃 객체) - setTimeout에서 설정된 것을 취소
setInterval(콜백함수, ms) - 넘겨준 함수를 해당 밀리초'마다' 흐른 뒤 호출
clearInterval(설정된 인터벌 객체) - setInterval 에서 설정된 것을 취소
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>setTime</title>
</head>
<body>
<div id="select">저를 선택 해주세요</div>
<button onclick="clearSetTime()">setTime 취소</button>
<button onclick="clearInterval()">setInterval 취소</button>
<script>
const select = document.getElementById("select");
const printSelect = () => {
console.log(select.innerText); //id가 select인 변수 select의 텍스트를 출력
};
//setTimeout
//clearTimeout을 하기위해 변수값을 지정해줘야 한다.
const setTimePrint = setTimeout(printSelect, 3000); //printselect함수를 3초 뒤 호출
const setIntervalPrint = setInterval(printSelect, 3000); //printselect함수를 3초 마다 호출
const clearSetTime = () => {
clearTimeout(setTimePrint); //settime 설정된 것을 취소
};
const clearInterval = () => {
clearInterval(setIntervalPrint); //setinterval 설정된 것을 취소
};
</script>
</body>
</html>결과 영상 확인 : https://blog.naver.com/yyhhhjun/222780293676
프론트 엔드 day 22 - setTimeout,setInterval/콜백함수/Promise/Async,Await
1. setTimeout, setInterval setTimeout(콜백 함수, ms(1000=1초)) - 넘겨준 함수를 해당 밀리 초...
blog.naver.com
2. 콜백 함수
callback 지옥이라고도 한다.
JS는 싱글 스레드로 동작하는 언어이지만, 비동기를 마주하는 상황이 빈번하게 일어남
setTimeout()과 같은 함수로 비동기 처리를 하는 순간이 있다.
콜백함수는 비동기적인 함수뿐만 아니라 동기적인 함수로도 쓰일 수 있다.
하지만, 코드가 너무 복잡하고 중첩되어 함수의 길이가 깊어지고 가독성이 떨어진다.
동기적인 흐름
: 동기는 요청을 보낸 후 결과물을 받아야하지만 다음 동작이 이루어지는 방식
비동기적인 흐름
: 효율성을 위해 비동기는 요청을 보낸 후 결과를 받지 않아도 다음 동작이 이루어지는 방식
해결방안
기명함수를 사용할 수 있지만 한계가 있음.
promise, async/await 를 이용
3. Promise
ES6이후로 나온 함수이다.
비동기 통신 상황일 때 악명 높은 콜백지옥을 탈출했다는 점에서 높은 평가를 받고있다.
promise를 선언하면 대기상태에서 실행은 되어있지만, 나중에 어떠한 조건(상태)을 만족했을 때 결과값을 받는 객체
대기/이행/실패 상태가 존재하며 각 pending, resolve, reject 라고 한다.
1) 대기 : 초기상태
2) 이행 : 성공상태, resolve(), Promise.resolve()
3) 거부 : 실패상태, reject(), Promise.reject()
이행상태는 then으로 처리한다. resolve를 통해 전달한 인자가 then으로 전달된다.
거부상태는 catch으로 처리한다. reject를 통해 전달한 인자가 catch로 전달된다.
1. Practice
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
let number = 5;
const callback = (number) => {
number = number + 1;
setTimeout(() => {
console.log(number); //console 창에 number 값을 5초 뒤 호출
}, 500);
return number;
};
const promise = new Promise((resolve, reject) => {
console.log(callback(number)); //6
resolve(callback(number)); //위에 실행부가 성공했는지? >> 6이 출력됐어?
reject("실패"); //위에 실행부가 실패했는지
});
promise // >> promise를 실행하고 result(인자값)에 값이 들어가면 callback 함수를 실행시켜 반환
.then((result) => { //resolve인 경우 인자값을 받아온다.
//then= 실행했는지 >> 이 부분의 인자로 전달
return callback(result); //6이 들어가면 7
})
.then((result) => {
return callback(result); //7 > 8
})
.then((result) => { //8 > 9
return callback(result);
})
.then((result) => { //9 > 10
return callback(result);
})
.then((result) => {//10 > 11
return callback(result);
})
.catch((error) => { //reject인 경우 인자를 받아온다.
console.log(error);
});
</head>
<body></body>
</html>
2. Practice
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
let number = 5;
//기명함수
const callback = (number) => {
number = number + 1;
setTimeout(() => {
console.log(number); //console 창에 number 값을 5초 뒤 호출
}, 500);
return number;
};
let state = false;
const promiseBoolean = new Promise((resolve, reject) => {
if (state) {
resolve("성공"); // >>then의 인자로 가게된다.
} else {
reject("실패"); // >> catch의 인자로 가게된다.
}
});
promiseBoolean
.then((message) => { //resolve일 때 인자를 받아온다.
console.log(message);
})
.catch((err) => { //rejcet일 때 인자를 받아온다.
console.log(err);
});
</script>
</head>
<body></body>
</html>
4. async/ await
promise의 then catch의 반복으로 인한 코드가 길어지는 현상과 pending(대기) 상태가 지속되는 현상을 해결하기 위해 등장함
promise를 이용한 것보다 코드를 더욱 간결하게 작성할 수 있다.
오류를 잡아내기 위해 try-catch문을 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
let number = 5;
const callback = (number) => {
number = number + 1;
setTimeout(() => {
console.log(number);
}, 500);
return number;
};
const async = async (number) => {
try {
let result = await callback(number);
result = await callback(result);
result = await callback(result);
} catch {
console.log("실패");
}
};
async(number);
</script>
</head>
<body></body>
</html>
'IT Study > JavaScript' 카테고리의 다른 글
| JavaScript - Math 함수 (0) | 2023.01.06 |
|---|---|
| JavaScript - 변수/데이터타입/제어문/함수/객체/배열 (0) | 2023.01.05 |
| JavaScript - Mouse/Fullscreen/Hidemenu 이벤트 (0) | 2023.01.05 |
| JavaScript - 노드추가/노드생성/배너 만들기 (0) | 2023.01.05 |
| JavaScript - 지역변수/전역변수, DOM (0) | 2023.01.05 |
댓글