javascript - 在 ajax 微调器上显示消息

Question

我正在进行 ajax 调用，并成功调用更多函数。 在通话过程中，我之前显示微调器并在完成后隐藏它。 我需要使用微调器显示一些消息，例如成功调用哪个函数

<div id="message"><i class="fa fa-spinner fa-spin"></i></div>是微调器的标记

function runAjax(){

    $.ajax({
        url:"demo_test.txt",
        beforeSend:function(){
           $('#message').show();
        },
        success:function(result){
           displaymessage1();
        },
        complete:function(){
           $('#message').hide();
        }
    });
}

function displaymessage1(){
    $('#message').append('This is message 1');
    displaymessage2();
}

function displaymessage2(){
    $('#message').append('This is message 2');
    displaymessage3();
}
function displaymessage3(){
    $('#message').append('This is message 3');
}

一旦调用“displaymessage1()”，我想在微调器上查看消息，然后查看 displaymessage2() 和 displaymessage3()；

问题是在成功函数完成之前不会出现消息。一旦成功完成，消息就会出现，但在不到一秒的时间内就会随着 ajax 完成而消失。

我需要显示它以创建处理效果，以便用户知道哪个方法正在运行。

我也尝试过设置 async:false，但仍然没有帮助。

请帮忙，谢谢

Answer 1

在这里，我创建了代码片段来跟踪/记录状态，您还可以看到 Working Fiddle here

下面的代码片段包含 JavaScript、CSS 和 HTML 代码块
(您可以运行最后的代码片段)

    //Assumption => delayTime [0: Start,    >0: Complete,    undefined: for_other_cases ]
    function displayMessage(statusText, delayTime) {
        var clear = function () {
            $("#state", this).empty();
        },
        $m = $('#message').show();

        if (delayTime == 0) clear.call($m);

        $('<li/>', {
            text: statusText
        }).appendTo($m.children('#state'));

        if (delayTime) $m.fadeOut(delayTime, clear);
    }

    function runAjax() {
        $.ajax({
            dataType: "jsonp",
            url: 'http://jsfiddle.net/echo/jsonp/',
            beforeSend: function () {
                displayMessage("Request Started...", 0);
            },
            data: {
              'text': 'some text',
              'text2': 'another text'
            }
        }).done(function (response) {
            displayMessage("Request Processed successfully!");
        }).fail(function () {
            displayMessage("Request failed!");
        }).always(function () {
            displayMessage("Action finished and status message will be cleared in 3 seconds", 3000);
        });
    }

    $(function () {
        $("#testBtn").on("click", runAjax);
    });

ul {
    margin: 5px;
    border: 2px dashed #999;
    padding: 10px;
}
ul>li {
    line-height:30px;
    list-style:none;
    border-bottom:1px dashed silver;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="testBtn" type="button">Click Me!</button>

<div id="message"> <i class="fa fa-spinner fa-spin"></i>
  <ul id='state'>
    <li>Message Log... (this item only for testing)</li>
  </ul>
</div>