后盾人JS -- 异步编程，宏任务与微任务

devtools/2025/2/12 13:29:37/

异步加载图片体验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 = srcimage.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 = srcscript.onload = resolvedocument.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 = 0const hd = document.getElementById('hd');(function run(){hd.innerHTML = ihd.style.width = i + "%"if(++i<=100){setTimeout(run,20)}})()}handle()</script>
</body>
</html>