cách chạy javascript trong khi đợi cuộc gọi lại ajax

Question

Tôi đang thực hiện cuộc gọi ajax đến máy chủ. Mã tôi cần chạy có thể được chia thành 3 nhóm.

1. Mã mà cần phải chạy trước khi in cuộc gọi ajax thực hiện (chuẩn bị đối tượng json đi đến máy chủ)
2. Mã mà cần phải được chạy sau khi cuộc gọi ajax đã trở lại (sử dụng những gì đã được gửi trở lại từ máy chủ)
3. Mã cần được chạy giữa thời gian người dùng nhấn nút và thời gian mọi thứ được thực hiện. Mã này không cần đối tượng json trả về.

Sẽ là lý tưởng khi chạy mã trong nhóm 3 sau khi thực hiện cuộc gọi ajax và trước khi kết quả quay lại để có được trải nghiệm và hiệu suất tốt nhất cho người dùng.

Việc này có thể thực hiện được không?

Làm cách nào?

Answer 1

Rất đơn giản:

function someFunction() { 
    //1. code that needs to run before ajax 
    $.ajax({...}).done(function() { 
     //2. code that needs to be run after the ajax call has returned 
    }); 
    //3. code that needs to be run between the time the user presses 
    // a button and the time everything is done. 
} 

này hoạt động vì JavaScript là đồng bộ trong thực hiện (trừ khi người lao động đang được sử dụng, nhưng đó là không liên quan đến vấn đề cụ thể này). Bit đầu tiên của mã sẽ chạy, sau đó cuộc gọi ajax sẽ yêu cầu trình duyệt bắt đầu một yêu cầu XHR, nhưng someFunction chưa hoàn thành, do đó, nó sẽ tiếp tục thực hiện đồng bộ.

Khi hoàn tất someFunction, luồng điều khiển sẽ được mở ra cho bất kỳ sự kiện không đồng bộ nào xảy ra, cuối cùng dẫn đến cuộc gọi lại done.

Để công bằng, lập trình hướng sự kiện không đồng bộ là điều không dễ đối với hầu hết mọi người để bao quanh đầu. Thật dễ dàng để mất theo dõi những gì mã được cho là xảy ra vào thời điểm nào.

Dưới đây là một ví dụ dễ dàng thực thi như thế nào không đồng bộ hành vi hoạt động:

(function() { 
    alert(1); 
    setTimeout(function() { 
     alert(2); 
    }, 0); //note the 0ms delay 
    alert(3); 
}()); 

Trình tự các cảnh báo sẽ 1, 3, 2. setTimeout sẽ không gọi lại gọi lại đồng bộ vì nó phụ thuộc vào thời gian chờ định trước, vì vậy ngay cả khi không có thời gian trôi qua, nó vẫn phải đợi hàm hiện tại kết thúc trước khi nó có thể tiếp tục.

Answer 2

Thực hiện cuộc gọi ajax khi phản ứng với sự kiện khách hàng hoặc trong bất kỳ trường hợp nào khác cho phép bạn chỉ định mã trong callbacks cũng như mã thực thi ngay sau khi mã ajax được tạo (không phải trong cuộc gọi lại).

Ví dụ:

// Code before the ajax call is made 
$.ajax({ 
    params, //other key values such as data 
    success: function (data) { 
     // one of the possible callbacks 
    } 
}); 
// Code executed immediately after ajax call is performed 
// This is executed before or after the callback is complete 
// In most cases it's before 

Vì vậy, bất cứ điều gì được thực hiện trước khi cuộc gọi ajax được làm bằng được đảm bảo để thực hiện trước đó. Bất cứ điều gì ngay lập tức sau khi cuộc gọi ajax gần như được đảm bảo thực hiện trước khi gọi lại được gọi. Cuộc gọi lại được đảm bảo thực thi sau khi máy chủ trả về một phản hồi.