使用 Promise 迴圈改變 div 背景顏色

Brocadecarp發表於2019-02-24
Promise

在極客時間大牛的重學前端的《Promise 裡的程式碼為什麼比 setTimeout 先執行？》的結尾，大牛留了一道題：

我們現在要實現一個紅綠燈，把一個圓形 div 按照綠色 3 秒，黃色 1 秒，紅色 2 秒迴圈改變背景顏色，你會怎樣編寫這個程式碼呢？複製程式碼

我的解答如下：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8"/>
    <meta name='viewport'/>
    <title>Document</title>
        #colorDiv {
            width: 50px;
            height: 50px;        
            border-radius: 100%;
        }
	</style>
</head>
<body>
    <div id="colorDiv"></div>
</body>

<script>
    let trafficLightDiv = document.getElementById('colorDiv')
    function changeTrafficLight(duration, color) {
            // 改變 div 背景顏色
            trafficLightDiv.style.backgroundColor = color
            // 延遲執行回撥
            setTimeout(resolve, duration)
        })
    }
	
    async function trafficLightFun() {
        await changeTrafficLight(3000, 'green')    
        await changeTrafficLight(1000, 'yellow')
        await changeTrafficLight(2000, 'red')
        await changeTrafficLight(1000, 'yellow')
        trafficLightFun()
    }
	
    trafficLightFun()
</script>複製程式碼


相關文章