在Javascript的forloop中调用Ajax时，html元素不会更改

Question

我是Ajax的新手。 在Javascript的for循环中调用Ajax时，html元素不会更改。您可以在chrome DevTools中拆分步骤。 请帮助我。

$('#card_finish1').show(); 
        setTimeout(function(){              

            for(var i=0; i<cardQuantity; i++) {             

                $.ajax({
                    url : "getCheckInCard",
                    type : "GET",
                    dataType : "text",
                    async : false,
                    data : {"bookNum" : bookNum},
                    error: function (xhr, ajaxOptions, thrownError) {
                        console.log(xhr.status);
                        console.log(thrownError);   
                    },
                    success : function(data){
                        $('#card_result').text('two'); 
                    },
                    complete : function(){
                        $.ajax({
                            url : "getCardPosition",
                            type : "GET",
                            dataType : "text",
                            async : false,
                            error: function (xhr, ajaxOptions, thrownError) {
                                console.log(xhr.status);
                                console.log(thrownError);   
                            },
                            success : function(data){
                                if(data == '1'){ 
                                    $('#card_result').text('one');

                                }                               
                            }
                        }); // end ajax(position)
                    }


                }); // end ajax                     

            }// end for
        }, 1000);