本のJavaScriptの面接試験問題は、複数の回答の書き方を考察します.

2579 ワード

赤信号は三秒に一回、青信号は二秒に一回、黄色灯は一秒に一回点灯します.どのように3つのライトを交互に点灯させますか?三つの点灯関数は既に存在します.
function red(){
    console.log('red    - ', new Date());
}

function green(){
    console.log('green  - ', new Date());
}

function yellow(){
    console.log('yellow - ', new Date());
}
1.calback実現
function loop(){
    setTimeout(function(){
        red();
        setTimeout(function(){
            green();
            setTimeout(function(){
                yellow();
                loop();
            }, 1000)
        }, 2000)
    }, 3000);
}
loop();
2.Promise実現
Promiseオブジェクトの汎用点灯関数を返します.
function tic(timer, callback){
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            callback();
            resolve();
        }, timer)
    })
}
var promise = new Promise(function(resolve, reject){ resolve() });
function loop(){
    promise.then(function(){
        return tic(3000, red);
    }).then(function(){
        return tic(2000, green);
    }).then(function(){
        return tic(1000, yellow);
    }).then(function(){
        loop();
    })
}
loop();
3.Generator実現
function* light(){
    yield tic(3000, red);
    yield tic(2000, green);
    yield tic(1000, yellow);
}

function loop(iterator, gen){
    var result = iterator.next();
    if (result.done) {
        loop(gen(), gen)
    } else {
        result.value.then(function(){
            loop(iterator, gen)
        })
    }
};

loop(light(), light);
4.async、await実現
(async function (){
    while(true){
        await tic(3000, red);
        await tic(2000, green);
        await tic(1000, yellow);
    }
})();
5.改良版の拡張可能カルバック実現
function light(func, timer){
    return function(callback){
        setTimeout(function(){
            func();
            callback();
        }, timer)
    };
}

function queue(funcs){
    (function next(){
        if (funcs.length > 0){
            var f = funcs.shift();
            f(next)
        }
    })();
}

function loop(){
    queue([
        light(red, 3000),
        light(green, 2000),
        light(yellow, 1000),
        loop
    ])
}
loop();
締め括りをつける
  • の最も簡単なcalbackが実現され、より多くの関数があると、地獄に戻り、コードが無残に見えなくなりますが、カプセル化されても、便利な拡張ができます.
  • Promise実現中トルク
  • Generator実装には汎用Generatorシーケンス実行関数
  • が含まれている.
  • asyncが大好きです.awaitは
  • を実現します.
    参照
  • 木の木http://www.cnblogs.com/dojo-lzz/p/5495671.html
  • http://codepen.io/anon/pen/RaOvWj?editors