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

标签 javascript jquery css ajax

出于某些原因,我想使用 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" ); }
    }); 

});

最佳答案

答案是因为您使用不相关的同步 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");
      }
    });
  });
});

关于javascript - Css 更改不适用于同步 ajax 调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40192964/

相关文章:

jquery - 从子元素中获取具有特定类的父元素

javascript - 如何解析 ECMAScript 规范中的此语法?

javascript - 如何将 .css 和 .js 文件链接到缺少 <html> 和 <head> 标记的 HTML

javascript - 无法在索引文件nodejs中要求类

javascript - 添加 "modal div"时更改背景颜色和透明度

html - 更改svg中图像的背景颜色

javascript - 开放层 3 : add text label to feature

javascript - 为什么 html5lightbox 不适用于 Angular ?

javascript - 如何为移动设备制作固定的 div,但在单击时用滚动填充视口(viewport)

CSS:隐藏一部分阴影