javascript - Css 更改不适用于同步 ajax 调用

Question

出于某些原因，我想使用 async : false 进行 synchronous ajax 调用，因为我想等待每个请求完成以执行下一个请求。

但它不起作用，CSS 更改 $(...).css( "opacity", "1") 不起作用。

但是当我切换到 async : true 时它起作用了!!

$( ".foo" ).each(function( i , item ) {

    $(item ).find(".ajaxLoader").css( "opacity" , "1" );    
    $.ajax({ 
        async    : false,
        ....
        complete : function(){ $(item ).find(".ajaxLoader").css( "opacity" , "0" ); }
    }); 

});

Answer 1

答案是因为您使用不相关的同步 ajax 调用锁定了 UI，就像 @epascarello在告诉你。不要使用同步请求...你可能不需要任何循环，因为你可以从一个 ajax 调用中获取所有相关数据，我猜但是如果你想发出一些 ajax 请求(这次是异步的!)顺序，那么你可以使用:

var d = $.Deferred().resolve();
$(".foo").get().forEach(function(foo) {      
  d = d.then(function() {
    return $.ajax({
      /*async: true,*/
      ....
      beforeSend: function(){
        $(foo).find(".ajaxLoader").css("opacity", "1");
      },
      complete: function() {
        $(foo).find(".ajaxLoader").css("opacity", "0");
      }
    });
  });
});