[jquery-ajax] jquery ajax 三种情况对比

<button class="btn1">async:false</button>
<button class="btn2">setTimeout</button>
<button class="btn3">deferred</button>

<img class="loadingicon" style="position:fixed;left:50%;top:50%;margin-left:-16px;margin-top:-16px;display:none;" src="loading.gif" alt="正在加载" />
<!--
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 -->

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>

    function getData1(){
        var result;
        $.ajax({
            url : 'p.php',
            async : false,
            success: function(data){
                result = data;
            }
        });

        return result;
    }

    $('.btn1').click(function(){
        $('.loadingicon').show();
        var data = getData1();
        $('.loadingicon').hide();
        alert(data);
    });

    $('.btn2').click(function(){
        $('.loadingicon').show();
        setTimeout(function(){
            $.ajax({
                url : 'p.php',
                async : false,
                success: function(data){
                    $('.loadingicon').hide();
                    alert(data);
                }
            });
        }, 0);
    });

    function getData3(){
        var defer = $.Deferred();
        $.ajax({
            url : 'p.php',
            //async : false,
            success: function(data){
                defer.resolve(data)
            }
        });
        return defer.promise();
    }    

    $('.btn3').click(function(){
        $('.loadingicon').show();
        $.when(getData3()).done(function(data){
            $('.loadingicon').hide();
            alert(data);
        });
    });</script>