Question

我希望在发送$ .ajax（）

之前通过提交显示<div>

我的HTML

<div id="waiting_div"></div>

CSS

#waiting_div {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .8);
    z-index: 999;
    display: block;
}

js功能

jQuery(document).ready(function() {
    jQuery("#waiting_div").hide();
});

function set_response_waiting() {
    jQuery("#waiting_div").show();
}
function del_response_waiting() {
    jQuery("#waiting_div").hide();
}

和主要的js

jQuery("#save_changed_prices").click(function(){
    set_response_waiting(); <-- showing div here

    var len = window.prices.length; //array with data for sending
    var i = 0;

    for (i = 0; i < len; i++) {
        if (window.prices[i].price >= 0) {
            jQuery.ajax({
                type: 'POST',
                url: ajaxurl,
                data: {...... },
                async: false
            }).done(function (data) {
                ...
            }).fail(function () {
                ...
            }).always(function () { 
                ...
            });
        }
    }

    del_response_waiting(); <-- hiding div
});

但是set_response_waiting（）函数并没有显示我的＃34; #wait_div＆＃34;在发送之前。

我需要在发送之前重绘或更新DOM树。但是如何？

这也不起作用..

jQuery.ajax({
                        type: 'POST',
                        url: ajaxurl,
                        data: {
                            'action': 'update_price',
                            'car_id': car_id,
                            'dep_city_id': window.prices[i].dep,
                            'arr_city_id': window.prices[i].arr,
                            'price': window.prices[i].price
                        }, 
                        beforeSend: set_response_waiting(),
                        async: false
                        })

Answer 1

Ajax是异步的，因为你可能已经意识到了，所以在你的函数中，JS将直接从set_response_waiting（）转到del_response_waiting（）; AJAX不是“在这里串联”执行的;尝试：

jQuery("#save_changed_prices").click(function(){
        var len = window.prices.length; //array with data for sending
        var i = 0;

        for (i = 0; i < len; i++) {

            if (window.prices[i].price >= 0) {

                jQuery.ajax({
                    type: 'POST',
                    url: ajaxurl,
                    data: {...... },
                    async: false
                }).done(
                    function (data) {
                      del_response_waiting(); //<-- hiding div
                       ...
                    }
                ).fail(function () {
                        ...
                    }
                ).always(set_response_waiting()); //<-- showing div here
            }
        }

  });

Answer 2

使用，承诺。

jQuery ajax是一种异步方法。所以你的功能显示并立即隐藏。

 jQuery("#save_changed_prices").click(function(){
        set_response_waiting(); <-- showing div here

        var len = window.prices.length; //array with data for sending
        var i = 0;
        var deferreds = [];

        for (i = 0; i < len; i++) {
            if (window.prices[i].price >= 0) {
                deferreds.push(
                    jQuery.ajax({
                        type: 'POST',
                        url: ajaxurl,
                        data: {...... },
                        async: false
                    }).done(
                        function (data) {
                           ...
                        }
                    ).fail(function () {
                            ...
                        }
                    ).always(function () { ...
                        });
                );
            }
        }
        // pending until all ajax requests done.
        $.when.apply(null, deferreds).done(function() {
            del_response_waiting(); <-- hiding div
        });
  });

---编辑

 jQuery("#save_changed_prices").click(function(){
        set_response_waiting(); <-- showing div here

        var len = window.prices.length; //array with data for sending
        var i = 0;
        var deferreds = [];

        for (i = 0; i < len; i++) {
            var deferred = $.Deferred();
            deferreds.push(deferred.promise());

            if (window.prices[i].price >= 0) {
                jQuery.ajax({
                    type: 'POST',
                    url: ajaxurl,
                    data: {...... },
                    async: false
                }).done(
                    function (data) {
                       ...
                    }
                ).fail(function () {
                        ...
                    }
                ).always(function () {
                        deferred.resolve(); // Resolve here!
                        ...
                    });
                );
            }
        }
        // pending until all ajax requests done.
        $.when.apply(null, deferreds).done(function() {
            del_response_waiting(); <-- hiding div
        });
  });

----编辑（最后）

jQuery("#save_changed_prices").click(function(){
    var send_price = function() {
      var deferreds = [];

      var len = window.prices.length; //array with data for sending
      var i = 0;
      for (i = 0; i < len; i++) {
          if (window.prices[i].price >= 0) {
              deferreds.push(
                jQuery.ajax({
                    type: 'POST',
                    url: 'http://jsonplaceholder.typicode.com/posts',
                    data: { price : window.prices[i].price },
                    async: false
                }).done(function (data) {
                    console.log('done', data);
                }).fail(function () {
                    console.error(done, data);
                }).always(function () { 

                })
              );
          }
      }
      $.when.apply(null, deferreds).done(function() {
          del_response_waiting();
      });

    }
    set_response_waiting();
    setTimeout(send_price); // setTimeout for browser redraw screen!!

});

检查jsfiddle的工作示例。：）

https://jsfiddle.net/yourimiyi/rsu4vo3m/

Answer 3

就像rsn在第一个回答中说的那样，但是你不能这样解决它。

这里我设置2秒超时，以便您可以看到它是如何发生的（我为了测试目的而改变了一些代码）：

jQuery("#save_changed_prices").click(function() {
  $('#waiting_div').show();

  setTimeout(function(){
    jQuery.ajax({
      type: 'POST'
    }).done(
      function(data) {
        $('#waiting_div').html('show after ajax submit');
        setTimeout(function(){
            $('#waiting_div').hide();
        }, 2000);
      }
    ).fail(function() {}).always(function() {});
  }, 2000);
});

您可以在https://jsfiddle.net/1e4xscn8/2/

查看示例

在发送ajax同步请求之前显示html元素

3 个答案: