Dừng khóa trình duyệt trong khi (đồng bộ) Ajax?

Question

Những gì tôi đang cố gắng làm là gắn thêm hình ảnh vào div (để người dùng biết thứ gì đó đang tải) và sau đó tôi gọi hàm jquery ajax, được đặt thành "async: false". Đây là mã của tôi:

$jQuery("#playersListDiv").html(loadingImage);  
$jQuery.ajax({ 
     type: "POST", /* this goesn't work with GET */ 
     url: urlValue, /*ex: "NBAgetGamesList.php" */ 
     data: parameters, /*ex: "param1=hello" */ 
     cache: false, 
     async: false, 
        success: function(data){ 

        } 
}); 

Vấn đề là trình duyệt khóa và không thêm hình ảnh tải cho đến SAU KHI cuộc gọi ajax hoàn tất vô dụng. Firefox là trình duyệt duy nhất thực sự gắn thêm hình ảnh tải. IE, Chrome và Safari KHÔNG thêm hình ảnh tải.

Tôi biết khóa trình duyệt xảy ra vì async được đặt thành false nhưng đây là tùy chọn duy nhất của tôi vì tôi phải đợi yêu cầu này hoàn tất trước khi tiếp tục vì tôi cần dữ liệu được trả về.

Có cách nào xung quanh vấn đề này không? Nếu tôi đặt cảnh báo sau khi tôi thêm hình ảnh tải hoạt động nhưng tôi không muốn cảnh báo xuất hiện mỗi lần.

Answer 1

Mặc dù khẳng định của bạn ngược lại bạn không cần nó phải được đồng bộ. Bất cứ điều gì bạn cần làm với/sau khi phản ứng có thể được thực hiện thành công (và/hoặc lỗi hoặc hoàn thành) gọi lại. Vì vậy, thay đổi:

$jQuery("#playersListDiv").html(loadingImage);  
$jQuery.ajax({ 
    ... 
    async: false, 
    ... 
}); 
// OTHER CODE 

là như thế này:

$jQuery("#playersListDiv").html(loadingImage);  
$jQuery.ajax({ 
    ... 
    async: true, 
    success: function(data) { 
     // OTHER CODE 
    } 
}); 

Hoặc di chuyển "CODE KHÁC" tới chức năng riêng biệt mà bạn gọi từ gọi lại thành công.

Nếu bạn cần một cái gì đó phức tạp hơn mà bạn có thể gói gọn ở trên trong một hàm và vượt qua một callback với nó:

function doAjaxStuff(callback) { 
    $jQuery("#playersListDiv").html(loadingImage);  
    $jQuery.ajax({ 
     ... 
     async: true, 
     success: function(data) { 
      // optional other processing here, then: 
      callback(data); 
     } 
    }); 
} 

// then from somewhere else in your code: 
doAjaxStuff(function(data) { 
    // do something with data 
}); 

Answer 2

Điều bạn muốn là jQuery.Deferred().

Answer 3

Tôi đã xem qua vấn đề này và tôi tìm thấy một giải pháp cho nó.
Giả sử! bạn thực sự cần sử dụng async : false trong số ajax request và bạn muốn hiển thị Hình ảnh tải trong khi thực hiện yêu cầu ajax. Nhưng yêu cầu ajax đang tạm dừng hoạt động giao diện người dùng khác (hiển thị hình ảnh tải) do async : false. Vì vậy, giải pháp đơn giản cho nó, Sử dụng fadeIn để hiển thị hình ảnh tải và fadeOut để ẩn hình ảnh tải.

Đây là bản trình diễn jsFiddle chứa yêu cầu ajax với async : false. Do đó, tải hình ảnh không hiển thị. (Tôi đã sử dụng phương pháp show để hiển thị hình ảnh tải.).

Dưới đây là một jsFiddle khác với hiệu ứng fadeIn và fadeOut. Nó hiển thị hình ảnh tải bất kể số async : false trong yêu cầu ajax.