異歩はjavascriptの真髄です.

5687 ワード

最近スマートルームのアプリを作りましたが、現在は純粋なJSコードは4000行以上になりました.導入された倉庫は含まれていません.まだまだアップグレードされています.このプロジェクトは至るところ非同期である.ほとんどは3~4階の呼び出しです.私にあげる感じは异歩です.惯れたら、あなたはとてもさわやかです.一番簡単な例を挙げます. 
どうやって非同期呼び出しの値を返すか分かりますか? 
そうするかもしれません. 
            function getValue(){
                var a = 10;
                setTimeout( function(){
                    a += 10;
                }, 10 );    
                return a;
            }
あなたが欲しいのはきっと手に入りません.
            function test(){
                var res = getValue();
                return res;
            }
consolie.log(test(); //結果10
なぜですか
settimeoutのせいで、a+=10を列に置いて、すべての同期コードが完成したら、彼が実行する番です.だからreturnの時、このa+=10は実行していないので、その上あなたも知らないで、非歩は結局いつ完成しますか?これは不確実です.10 msを設定しても10 msとは限りません..キューの前に時間がかかる他のタスクがある場合、10 msはまだ応答できません.このような例は多すぎます.例えば、最近のプロジェクトはエアコンのオフとオフをコントロールします.この時間はネットワークとチップ、そしてエアコンの応答によって制御されることは明らかである.どれぐらいの時間が設定されていますか?その時間に戻ります.
彼はいつ帰ってきますか?どうやって彼の価値を得ますか?
コールバックを使います
            function getValue2( fn ){
                var a = 10;
                setTimeout( function(){
                    a += 10;
                    fn && fn( a );
                }, 10 );    
                return a;
            }
            function test2(){
                getValue2( function( res ){
                    console.log( res );
                } );
            }
test 2()
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   3  -->  2" );
    })
    .in( 3000 )
    .in( function(){
        watch( "2   2  -->  2" );
    } )
    .in( 2000 )
    .in( function(){
        watch( "3      " );
    } ).out();