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');
}

＆＃34; displaymessage1（）＆＃34;被调用，我想在spinner上看到消息，然后是displaymessage2（）和displaymessage3（）;

问题是在成功功能完成之前消息没有出现。一旦成功完成，消息出现但在几分之一秒内就会随着ajax的完成而消失。

我需要显示它以创建处理效果，这样用户就会知道正在运行哪种方法。

我也尝试过设置async：false，但它仍无用。

请帮助，谢谢

Answer 1

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

code-snippet下面有JavaScript，CSS和HTML代码块
（你可以在最后运行代码段）

＆＃13;

    //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);
    });

＆＃13;

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

＆＃13;

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

＆＃13;

在ajax微调器上显示消息

1 个答案: