異步是javascript的精髓

最近作了一個智能家居的APP，目前純JS代碼已經4000多行，不包括任何引入的庫。還在不斷升級改造中。。。這個項目處處都是異步。大多數都是3～4層調用。給個人感受就是異步當你習慣了，你會發現很爽。下面舉個最簡單的例子？ 

你知道怎麼返回一個異步調用的值嗎？ 

也許你會這麼幹 

            function getValue(){
                var a = 10;
                setTimeout( function(){
                    a += 10;
                }, 10 );    
                return a;
            }

你確定得不到你想要的20

            function test(){
                var res = getValue();
                return res;
            }

console.log( test() );  //結果10

爲何？

由於settimeout的緣由，把a += 10放在隊列中，等全部的同步代碼完成以後，才輪到他執行。因此return的時候，這個a += 10 是沒有執行的，並且你也不知道，異步到底何時完成？ 這個是不肯定的，哪怕你設置了10ms，未必是10ms。。。。若是隊列前面有耗時較長的其餘任務，10ms仍是得不到響應。。。這樣的例子太多了。好比，我最近的項目，控制空調的關和開。。很顯然，這個時間受制於網絡和芯片，以及空調的響應。。並非設置了多長時間，就是那個時間返回。

那不知道他何時，返回，怎麼拿到他的值？

用回調!

            function getValue2( fn ){
                var a = 10;
                setTimeout( function(){
                    a += 10;
                    fn && fn( a );
                }, 10 );    
                return a;
            }

            function test2(){
                getValue2( function( res ){
                    console.log( res );
                } );
            }

test2();

你GET到了嗎？

下面就是一個簡單的異步調用了:

var Q = {
        a : [],
        in : function( v ){
            if( !/number|function/.test( typeof( v ) ) ) return;
            this.a.push( v );
            return this;
        },
        out : function(){
            var me = this;
            var v = me.a.shift();
            if( !v ) return;
            if( typeof( v ) == 'function' ) {
                v();
                me.out();
                return;
            }
            setTimeout( function(){
                me.out();
            }, v );
        }
    }

    function watch( res ){
        var oDiv = document.createElement( "div" );
        oDiv.innerHTML = res;
        // console.log( res );
        document.body.appendChild( oDiv );
    }

    Q.in( function(){
        watch( "1 <strong style='color:red'>延時3秒 -->輸出2</strong>" );
    })
    .in( 3000 )
    .in( function(){
        watch( "2 <strong style='color:green'>延時2秒 -->輸出2</strong>" );
    } )
    .in( 2000 )
    .in( function(){
        watch( "3 <strong style='color:blue'>後面沒有了</strong>" );
    } ).out();