只有同步任务才进入主线程执行,所以此时异步任务已转换成同步任务
异步原理HTML示范：
<!DOCTYPE html><html lang="zh-CN"><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>异步任务演示</title></head><body><script>// 1. 三个同步任务console.log(1);console.log(2);console.log(3);console.log('--------');// 2. 2个同步任务，1个异步任务console.log(1);setTimeout(() => console.log(2), 1000);console.log(3);console.log('---------');</script><!-- DOM渲染是同步,还是异步? 同步--><!-- keyup: 抬起时触发 --><input type="text" onkeyup="console.log(this.value)" placeholder="keyup" /><!--keyup: 实现输入与控制台输出同步实时显示1. 当抬起时,输入框中内容已渲染完成,同步任务结束2. 异步任务开始: keyup已获取到输入框内容,显示正确--><br /><!-- keydown: 按下时触发 --><input type="text" onkeydown="setTimeout(()=>console.log(this.value),0)" placeholder="keydown" /><br /><!--setTimeout加上后,你按下某个键之后,keydown也会立即执行,但执行的是一个异步任务而这个异步任务并不会马上执行,而是要待当前同步任务完成(当前同步任务是DOM渲染)待主线程同步任务执行完毕,setTimeout()最低延迟立即执行,从而成功的跳过了空字符实现了和keyup一样的实时同步显示效果--><input type="text" oninput="console.log(this.value)" placeholder="input" /><!-- input === keyup === setTimeout(()=>keydown) 实际上完全不同 --><!-- keyup,keydown: 键盘事件input: 文本事件 --><!-- 思考: 当输入内容时, keyup,keydown,input 的顺序是什么? --><!-- keydown -> input -> keyup --></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
