Kỹ thuật tinh giản AJAX?

Question

Câu hỏi của tôi hơi trừu tượng.

Tất cả chúng ta đều quen thuộc với trình tải trước AJAX/trình quay xuất hiện khi có yêu cầu AJAX. Câu hỏi của tôi là làm thế nào để bạn tránh những điều này?

Ví dụ: danh sách có thể sắp xếp. Khi người dùng kéo và thả các mục để sử dụng chúng, một cuộc gọi AJAX được thực hiện để cập nhật thứ tự.

Trước đó, tôi sẽ bật lên một trình quét toàn màn hình AJAX để ngăn người dùng thực hiện bất kỳ điều gì cho đến khi cuộc gọi AJAX hoàn tất.

Câu hỏi của tôi là, làm thế nào tôi sẽ tránh né AJAX spinner và "tinh giản" yêu cầu ajax để đảm bảo nếu người dùng khởi tạo 20 yêu cầu ajax trong 2 giây, chúng sẽ được thực thi theo thứ tự không?

Tôi không thực sự cần ví dụ về mã, chỉ kỹ thuật/ý tưởng được chấp nhận hoặc phổ biến. Hoặc nếu tôi hoàn toàn đi theo dõi ở đây.

Cảm ơn bạn

Answer 1

cập nhật

sử dụng async javascript library thay vì điều này để đạt được những gì bạn muốn

cũ bên dưới

Cho đến nay các câu trả lời hay về cách sử dụng mảng hoặc hàng đợi để đảm bảo d và trả lại một lần. Tôi sẽ loại bỏ các spinner tất cả cùng nhau tương tự như cách gmail hiện và chỉ nhắn tin cho người dùng khi cần thiết. Không có điểm trong việc làm phiền người dùng về tất cả các giao dịch spinner này. Họ trông giống như một con robot nhỏ một lỗ. Đây là một số mã để tôi đánh thức.

Vì tôi đã có một cái gật đầu về điều này, tôi sẽ giải thích các tính năng của nó.

1. Dừng xếp hàng nếu lỗi xảy ra
2. Tiếp tục xếp hàng như thành công xảy ra
3. Có xử lý sự kiện cho sự thành công/lỗi với bối cảnh

tôi viết plugin vì vậy đây là một ý tưởng xứng đáng với một plugin? Tôi không nghĩ vậy nhưng hey bạn không bao giờ biết.

var queue = [], 
doRequest = function(params) { 
    params.running = true; 
    $.ajax({ 
     url: params.url, 
     dataType: 'json', 
     success: function(d) { 
      params.success.call(params,d); 
      queue.unshift(); // Quit counting your change and move along. 
      if (queue.length > 0) { 
       doRequest(queue[0]); // Hey buddy, your next. 
      } 
     }, 
     error: function(a,b,c) { 
      params.error.call(params,a,b,c); 
      alert('"oops"'); // Rick Perry 
     } 
    }); 
}, 
queueRequest = function(params) { 
    queue.push(params); // Sir, you'll need to go to the BACK of the line. 
    if (!queue[0].running) { 
     doRequest(queue[0]); 
    } 
}; 

// so to use this little snippit, you just call "queueRequest" like so (over and over) 
queueRequest({ 
    url: 'someajax.abc', 
    success: function(d) { 
     // let the user know their stuff was saved etc. 
     // "this" will be the context of the "params" 
    }, 
    error: function(a,b,c) { 
     // let the user know something went wrong etc. 
     // "this" will be the context of the "params" 
    } 
}); 

Và bạn đã hoàn tất.

Answer 2

Một trong các tùy chọn có thể tạo ra một số loại yêu cầu xếp hàng trên máy khách. Khi người dùng sắp xếp hai mục, một mục sẽ được thêm vào hàng đợi và bắt đầu thực hiện. Nếu một sắp xếp khác xảy ra trước khi cuộc gọi đầu tiên hoàn thành, nó được đặt trong hàng đợi và sẽ được thực hiện sau khi kết thúc đầu tiên.

CẬP NHẬT:
Bạn nên chắc chắn xử lý trường hợp khi yêu cầu đồng bộ được thực hiện. Ở giai đoạn này tất cả các yêu cầu ajax nên được lưu trữ bằng cách nào đó trong trường ẩn (chỉ là một ý tưởng) và xử lý bởi máy chủ trước chính yêu cầu đồng bộ.

Answer 3

Bạn có thể tạo "người quản lý yêu cầu ajax" xếp hàng đợi (và có khả năng bó cùng nhau) đang chờ yêu cầu ajax. Tôi có một ứng dụng phức tạp với nhiều điều khiển có thể cập nhật ajax, tôi chỉ hiển thị các trình quay trên các điều khiển đang được cập nhật. Vì danh sách có thể kéo của bạn chỉ cập nhật nội dung trên máy chủ, bạn có thể lấy đi mà không cần máy quay.

Answer 4

tôi đề nghị bạn đợi jquery, nó giúp bạn xếp hàng bất cứ điều gì, nếu nó ajax yêu cầu hoặc hoạt hình hàng đợi ...

Answer 5

Câu trả lời này là một chút trừu tượng, nhưng hãy nhìn vào đối tượng jQuery thu nhập hoãn lại: http://api.jquery.com/category/deferred-object/

Nó có thể hữu ích trong tình huống của bạn, vì nó về cơ bản cho biết thêm một số thông tin nhà nước để gọi AJAX mà bạn có thể đọc/cập nhật theo ý muốn.

Answer 6

• Có một yêu cầu Q. trung tâm
• Và một spinner ẩn trên đầu trang của tất cả mọi thứ.

yêu cầu Trung Q Có một mảng trung ương, mà tạm thời nắm giữ tất cả yêu cầu, do đó pesudo mã sẽ là một cái gì đó như thế này ...

var centralQ = []; //holds the entire process Q 

var inProc = false; //provides an in Q proc lock 
//processes the request one at a time 

function reqProc() { 
    if(centralQ.length == 0) { 
     inProc = false; 
     return true; 
    } 

    inProc = false; //locks it 
    var req = centralQ[0]; 

    function callBack() { 
     //error/res processing?? 
     if(req.callback) { 
      req.callback.apply(req, arguments); //calls the request callback 
     } 

     window.setTimeout(reqProc, 0); //loop backs, uses timeOut to defer the the loop 
    } 

    //Your loader??? 
    jQuery.get(req.url, req.data, callBack); 
} 

function addReq(addRequest) { 
    centralQ.push(addRequest); 
    if(!inProc) { //does not process if it is already running 
     reqProc(); 
    } 
} 

Bạn proabably cần phải làm một số lỗi đánh bắt/thử lại, nhưng u có được ý tưởng thô.

Spinner toàn cầu Chỉ cần bắt đầu tô điểm vào phần đầu trang khi cần và giảm dần khi không cần thiết.

Answer 7

Đây không phải là lý do chính xác, có tùy chọn async trong jquery không?

Sử dụng async: true để xếp hàng yêu cầu.

Các spinners được giữ để tránh gửi cùng yêu cầu hơn và hơn một lần nữa. Giống như một trường hợp, trong đó có tùy chọn bật và tắt tính năng ... nếu người dùng nhấp lại vào cùng một nút, bạn đang gửi cùng một yêu cầu lặp đi lặp lại. Chỉ sử dụng spinners trong những trường hợp này.

Bật lên một hộp lớn, để tránh truy cập vào toàn bộ trang ... chỉ là một ý tưởng ngu ngốc (không có hành vi phạm tội).

Sử dụng trình quay, cho các phần tử cụ thể .. đang được xử lý hoặc thao tác bằng cách nào đó. Đối với yêu cầu, chỉ cần sử dụng async ...

TRƯỜNG HỢP ĐÃ ĐÓNG GÓI;)