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

[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>