Css更改與同步ajax調用不起作用

我想使用async : false使同步 ajax調用由於某種原因，因爲我想等待每個請求完成以執行下一個請求。Css更改與同步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"); } 
    }); 

});

來源

2016-10-22 Youssef

因爲在您使用同步請求鎖定它之前，頁面沒有時間重繪。 – epascarello

@epascarello沒有足夠的時間，因爲阿賈克斯調用需要幾秒鐘 – Youssef

不，沒有時間.....這就是爲什麼你有這個問題。 – epascarello

答案是，因爲你使用unrelevant同步Ajax調用就像@epascarello鎖UI告訴你的。不要使用同步請求... 您可能不需要任何循環，因爲您可以從一個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"); 
     } 
    }); 
    }); 
});

來源

2016-10-22 15:09:20

感謝很多人，正是我所需要的;） – Youssef

與ajax

$.ajax({ 
    beforeSend(){ 
     $(item).find(".ajaxLoader").css("opacity" , "1"); 
    }, 
    ... 
})

文件鏈接beforeSend()功能試用：http://api.jquery.com/jquery.ajax/

來源

2016-10-22 13:59:05 tejashsoni111

這是一樣的...不工作 – Youssef

如果你在全高度.ajaxLoader DIV和寬度這個div原因要點爲解決你更好的隱藏ajax響應的成功div，請在這裏。

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

來源

2016-10-22 14:46:32 Jazzzzz

它對我來說是一個有趣的問題/任務來解決這個問題。我很喜歡它。

可能會看起來有點奇怪給你，我用0.5 seconds延遲我的測試，但你可以根據你的場景更多地優化代碼。

工作Fiddle

希望這會幫助你。

Regards，

來源

2016-10-22 16:43:47 Mehmood

謝謝你的答案對我來說非常有用;） – Youssef

Css更改與同步ajax調用不起作用

回答

相關問題