1) synchronous.html
<!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>
</head>
<body>
<script>
// function work(){
// const start = Date.now();
// for(let i=0; i<1000000000; i++){
// }
// const end = Date.now();
// console.log(end-start+'ms');
// }
function work(callback){
setTimeout(()=>{
const start = Date.now();
for(let i=0; i<1000000000; i++){
}
const end = Date.now();
console.log(end-start+'ms');
callback();
},0)
}
console.log('work호출하기');
work(()=>{
console.log('작업이 끝났어요');
});
console.log('다음 작업');
</script>
</body>
</html>2)
myScript.js
function printHi(){
console.log('안녕!!!');
}
callback.html
<!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>
</head>
<body>
<script>
// function loadScript(src){
// //script태그를 만들고 페이지에 script태그를 추가합니다.
// //태그가 페이지에 추가되면 src에 있는 스크립트를 로딩하고 실행합니다.
// let script = document.createElement('script');
// script.src = src;
// document.head.append(script);
// }
// loadScript("myScript.js");
// printHi();
function loadScript(src, callback){
let script = document.createElement('script');
script.src = src;
script.onload = () => callback();
document.head.append(script);
}
loadScript("myScript.js", function(){
printHi();
});
</script>
</body>
</html>3) callback2.html
<!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>
</head>
<body>
<script>
console.log('1');
setTimeout(()=>{
console.log('2');
},2000)
console.log('3');
//콘솔창 : 132
function printConsole(){
console.log("자바스크립트 콜백!!!!!");
}
//synchronous 콜백 실습
function printImmediately(print){
print();
}
printImmediately(printConsole);
//asynchronous 콜백 실습
function printWithDelay(print,timeout){
setTimeout(print,timeout);
}
printWithDelay(printConsole, 2000);
</script>
</body>
</html>4) promise.html
<!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>
</head>
<body>
<script>
//1. 프로미스 프로듀서
const promise = new Promise((resolve, reject)=>{
console.log('수행중......');
setTimeout(()=>{
resolve("결과");
},2000)
});
console.log(promise);
//2. 프로미스 컨슈머 then, catch, finally
// promise.then(
//결과를 다룹니다.
// function(a){
// console.log('resolve실행');
// console.log(a);
// },
// a=>console.log(a),
//에러를 다룹니다.
// function(e){
// console.log('reject실행');
// console.log(e);
// }
// e=>{
// console.log(e);
// console.log('reject실행');
// }
// )
//성공한 결과는 then이 처리 실패하면 catch가 처리
promise.then(value=>{
console.log(value);
})
.catch(error=>{
console.log(error);
}).finally(()=>{
console.log('끝났어요');
})
</script>
</body>
</html>'노력이 좋아서' 카테고리의 다른 글
| <step61>'js_canvas' (0) | 2022.06.16 |
|---|---|
| <step60>'js_fetch_shoppinglist' (0) | 2022.06.15 |
| <step59>'js_JSON' (0) | 2022.06.14 |
| <step59>'js_복습(2)' (0) | 2022.06.14 |
| <step58>'js_복습(1)' (0) | 2022.06.13 |