728x90
01. 콜백함수 : 다른 함수에 인수로 넘겨지는 함수
콜백함수는 하나의 함수가 실행되고 두 번째 함수를 실행하는 함수입니다.
function func() {
document.write("함수가 실행되었습니다.2")
}
function callback(str) {
document.write("함수가 실행되었습니다.1")
str();
}
callback(func);
결과보기
02. 콜백함수 : 반복문
콜백함수를 반복문을 사용해 반복하는 방법입니다.
function func(index) {
document.write("함수가 실행되었습니다." + index);
}
function callback(num) {
for (let i = 1; i <= 10; i++) {
num(i);
}
}
callback(func);
결과보기
03. 콜백함수 : 동기/비동기
콜백함수의 동기/비동기 입니다. 여기서 동기는 동시에 실행하는 것을 말합니다.
//01. 순서대로 실행
// function funcA() {
// document.write("funcA가 실행되었습니다.
");
// }
// function funcB() {
// document.write("funcB가 실행되었습니다.
");
// }
// funcA();
// funcB();
//a
//b
//02. setTimeout 때문에 b가 먼저 실행
// function funcA() {
// setTimeout(() => {
// console.log("funcA가 실행되었습니다.
");
// }, 1000);
// }
// function funcB() {
// console.log("funcB가 실행되었습니다.
");
// }
// funcA();
// funcB();
//b
//a
//03. callback함수 이용하여 setTimeout이 걸려있지만 a 먼저 실행
// function funcA(callback) {
// setTimeout(() => {
// console.log("funcA가 실행되었습니다.
");
// callback();
// }, 1000);
// }
// function funcB() {
// console.log("funcB가 실행되었습니다.
");
// }
// funcA(function () {
// funcB();
// })
//a
//b
//04. callback함수를 반복해서 사용할 때
function funcA(callback) {
setTimeout(() => {
console.log("funcA가 실행되었습니다.
");
callback();
}, 1000);
}
function funcB(callback) {
setTimeout(() => {
console.log("funcB가 실행되었습니다.
");
callback();
}, 1000);
}
function funcC(callback) {
setTimeout(() => {
console.log("funcC가 실행되었습니다.
");
callback();
}, 1000);
}
function funcD() {
setTimeout(() => {
console.log("funcD가 실행되었습니다.
");
}, 1000);
}
funcA(function () {
funcB(function () {
funcC(function () {
funcD()
});
});
});
결과보기
funcA가 실행되었습니다.
funcB가 실행되었습니다.
funcC가 실행되었습니다.
funcD가 실행되었습니다.
funcB가 실행되었습니다.
funcC가 실행되었습니다.
funcD가 실행되었습니다.
728x90
반응형
'Javascript' 카테고리의 다른 글
| [javascript]startsWith() / endsWith() (1) | 2022.09.27 |
|---|---|
| [javascript]클래스 (3) | 2022.09.20 |
| [javascript]재귀함수, 내부함수 (1) | 2022.09.20 |
| [javascript]펼침연산자 - 복사, 추가, 결합 (2) | 2022.09.20 |
| [javascript]비구조화 할당 (4) | 2022.09.20 |
댓글