本篇教程介绍了JavaScript基础教程 异步调用详解，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。

<

你知道怎么返回一个异步调用的值吗？ 
也许你会这么干 

            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();

     

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端JavaScript频道！