后盾人JS -- 异步编程，宏任务与微任务
异步加载图片体验JS任务操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function loadImag(src,resolve,reject){
let image = new Image()
image.src = src
image.onload = ()=>{
resolve(image)
}
image.onerror = reject
}
loadImag(
"images/houdunren.png",
(image)=>{
document.body.appendChild(image) //回调方式
},
()=>{
console.log("加载失败")
}
)
</script>
</body>
</html>定时器的任务轮询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
background-color: greenyellow;
width: 200px;
height: 200px;
position: relative;
left: 0;
}
</style>
<body>
<div></div>
<script>
function interval(callback,delay){
let id = setInterval(()=>callback(id),delay)
}
interval(timeId => {
const div = document.querySelector("div")
let left = parseInt(window.getComputedStyle(div).left)
div.style.left = left + 10 + "px"
if(left >= 200)
{
clearInterval(timeId)
interval(timeId=>{
let width = parseInt(window.getComputedStyle(div).width)
div.style.width = width - 10 + "px"
if(width<=20)
{
clearInterval(timeId)
}
},100)
}
},50)
console.log("后盾人.com")
</script>
</body>
</html>定时器有任务轮询（因为是异步的），所以肯定是主线程执行完之后才来执行它
通过文件依赖了解任务排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function load(src, resolve) {
let script = document.createElement("script")
script.src = src
script.onload = resolve
document.body.appendChild(script)
}
load("js/hd.js", () => {
load("js/houdunren.js", () => {
houdunren()
})
})
</script>
</body>
</html>这是文件的依赖，学习promise后会让这个更加的简洁
后面就看不懂了
宏任务与微任务
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
setTimeout(()=>{
console.log("定时器")
},0)
Promise.resolve().then(value=>{
console.log("Promise")
})
console.log("后盾人")
</script>
</body>
</html>定时器的任务编排
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
setTimeout(()=>{
console.log("定时器 1")
},2000)
setTimeout(()=>{
console.log("定时器 2")
},2000)
console.log("后盾人")
for(let i = 0;i<1000;i++)
{
console.log("")
}
</script>
</body>
</html>时间需要少的先执行
DOM渲染任务是放到最后的，JS是后渲染的
进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 100px;
background-color: greenyellow;
}
</style>
<body>
<div id="hd"></div>
<script>
function handle(){
let i = 0
const hd = document.getElementById('hd');
(function run(){
hd.innerHTML = i
hd.style.width = i + "%"
if(++i<=100)
{
setTimeout(run,20)
}
})()
}
handle()
</script>
</body>
</html>