紅綠燈面試題目（Promise, 佇列實現）
阿新 • • 發佈：2018-12-17
紅燈三秒亮一次，黃燈1秒亮一次，綠燈2秒亮一次，，如何讓三個燈不斷交替重複亮燈
light函式返回一個Promise狀態，當Promise狀態從Pending => fulfilled，step才會執行下一個then。這裡使用遞迴，不使用迴圈是因為JavaScript的時間迴圈機制，因為setTimeout 屬於microtask，會被掛起，直到主執行緒的迴圈結束後才執行，這樣迴圈就會一直空迴圈。
實現佇列實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; } #light { width: 100px; height: 100px; border-radius: 50%; } </style> </head> <body> <div id="light"></div> <script> var lightStyle = document.querySelector("#light").style; function setColor (color, time) { return function (callback) { lightStyle.backgroundColor = color; setTimeout(callback, time); } } // 這裡接受的是一個函式陣列 var queue = function (func) { // next()是一個自執行函式 (function next () { if(func.length > 0) { // shift()從頭刪除一個元素 var f = func.shift(); f(next); } })(); }; var setRedColor = setColor("red",3000); var setYellowColor = setColor("yellow",1000); var setGreenColor = setColor("green",2000); // 也是一個自執行函式，從函式不停執行 +function tick () { queue([ setRedColor, setYellowColor, setGreenColor, tick ]) }() </script> </body> </html>
+function () {} ()
// 相當於自執行函式
(function() {}) ()
對大神的寫法暫時不理解，已將目前的理解寫在註釋上，個人不太喜歡這種炫技的寫法。 還有迭代器寫法，日後更新。