从红绿灯说起
红绿灯实现效果为：每隔3秒，红绿灯依次从绿变黄，再变红。
下面代码为红绿灯样式源码，设定一开始页面显示的是绿灯：
<!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>
<link rel="stylesheet" href="./css/index.css">
<style>
.light{
width: 500px;
height: 150px;
background-color: black;
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 5px;
}
.light>div{
width: 100px;
height: 100px;
border-radius: 50%;
}
.red{
background-color: red;
opacity: 0.3;
}
.green{
background-color: green;
opacity: 1;
}
.yellow{
background-color: yellow;
opacity: 0.3;
}
</style>
<body>
<div class="light">
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>
</div>
<div class='timer'></div>
</body>
<script>
</script>
</html>为实现计时效果，在红绿灯下面设置一个div标签显示从开始执行的到当前时间的秒数。计时部分代码如下：
let t0 = Date.now()
setInterval(function () {
let t1 = Date.now()
let t = t1 - t0
let sec = Math.floor(t / 1000 % 60)
let mic = Math.floor(t % 1000 / 10).toString().length == 1 ? Math.floor(t / 10 % 100).toString() + '0' : parseInt(t / 10 % 100).toString()
document.querySelector('.timer').innerHTML = sec + ':' + mic
}, 100)颜色变换代码如下：
function yellow() {
document.querySelector('.red').style.opacity = 0.3
document.querySelector('.green').style.opacity = 0.3
document.querySelector('.yellow').style.opacity = 1
console.log('yellow')
}
function red() {
document.querySelector('.red').style.opacity = 1
document.querySelector('.green').style.opacity = 0.3
document.querySelector('.yellow').style.opacity = 0.3
console.log('red')
}
function green() {
document.querySelector('.red').style.opacity = 0.3
document.querySelector('.green').style.opacity = 1
document.querySelector('.yellow').style.opacity = 0.3
console.log('green')
}欲实现该功能，则需要使用setTimeout方法，但该方法是异步方法，也即，延时器在延时过程中不会发生代码执行的阻塞，而是继续顺序执行。所以欲使代码顺序同步执行，需要使用回调函数，在延时器延时结束后再调用，以此实现目标效果。同时，为让代码不间断执行，颜色一直变换，则需要使用死递归或死循环。
法1：回调函数实现
function fn(){
setTimeout(()=>{
yellow()
setTimeout(()=>{
red()
setTimeout(() => {
green()
fn()
}, 3000);
},3000)
},3000)
}
fn()上述代码逻辑是：在函数内封装延时器，当前绿灯，3秒延迟后变为为黄灯。此时再设定延时器，3秒后执行变红灯操作。然后再设定延时器，3秒后灯变绿，接着递归调用该函数，实现整体代码无限重复执行。
法2：Promise实现
在法1中，出现了回调函数反复嵌套回调函数的情况，这称之为回调地狱。这样的嵌套结构复杂，代码的可读性较差，也不利于代码维护。为解决这一问题，ES6中新增了promise，利用promise，可以解决回调地狱的问题。将上述代码通过promise实现，代码如下：
function promiseFn0() {
let p0 = new Promise(function (resolve, reject) {
setTimeout(function () {
yellow();
resolve();
}, 3000);
});
return p0
}
function promiseFn1() {
let p1 = new Promise(function (resolve, reject) {
setTimeout(function () {
red();
resolve();
}, 3000);
});
return p1
}
function promiseFn2() {
let p2 = new Promise(function (resolve, reject) {
setTimeout(function () {
green()
resolve();
}, 3000);
});
return p2
}
function task(){
promiseFn0().then(promiseFn1).then(promiseFn2).then(task)
}
task()上述代码逻辑是：将三个每隔三秒变色的功能封装到promise对象中，并将promise对象分别封装到三个不同的函数中，利用promise的reslove方法，在then中设置执行下一步操作函数。最后将以上代码整理封装成一个可递归的函数，在红绿灯变色一遍以后再次递归调用这个函数，实现循环。
法3：async/await
async与await是promise的语法糖，作用是将promise对象实现的异步代码在书写上更像同步代码，并且能简单的对异步代码进行对应的promise对象创建与封装。上述task函数通过使用async与await语句书写如下：
async function task(){
await promiseFn0()
await promiseFn1()
await promiseFn2()
task()
}
task()JS中事件轮询机制
JS语言为单线程，对于整个JS代码来说是顺序执行的，而当线程执行到异步代码时，则会将代码交由浏览器（WebAPI），然后继续执行。整个JS代码就被视为一个宏任务。
异步代码执行流程
浏览器在收到异步任务时，会开辟新的线程，代码在Event Table中执行，一旦执行到期或完成，异步代码内部的函数就会根据其类型被调入宏任务队列与微任务队列。
宏任务队列（Macrotask Queue）
宏任务队列中异步任务有：ajax，setTimeout,setInterval,DOM监听等。
微任务队列（Macrotask Queue）
微任务队列中异步任务有：Promise的then、catch回调，async await，queueMicroTask等。
而队列的执行顺序是先执行微任务队列，只有当微任务队列内任务全部执行完成队空时，宏任务队列才开始执行。在执行过程中，如果有遇到异步任务，则依照前面异步代码流程，放入Event Table，然后放入宏微队列，循环执行，直到结束。
整体流程图如图所示：
扫一扫
523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
