Tìm hiểu xem yêu cầu Ajax mất bao lâu để hoàn thành

Question

Cách tốt nhất để tìm hiểu xem yêu cầu $.ajax() cụ thể mất bao lâu?

Tôi muốn nhận thông tin này và sau đó hiển thị thông tin trên trang ở đâu đó.

ĐÁP ?? ::::

Tôi mới để javascript, đây là tốt nhất mà tôi có thể đưa ra nếu bạn không muốn inline "thành công" chức năng (vì nó sẽ là một chức năng lớn hơn nhiều) Đây có phải là một cách hay để làm điều này không? Tôi cảm thấy như tôi đang làm việc phức tạp hơn ...:

makeRequest = function(){ 
    // Set start time 
    var start_time = new Date().getTime(); 

    $.ajax({ 
     async : true, 
     success : getRquestSuccessFunction(start_time), 
    }); 
} 

getRquestSuccessFunction = function(start_time){ 
    return function(data, textStatus, request){ 
     var request_time = new Date().getTime() - start_time; 
    } 
} 

Answer 1

Codemeit là đúng. Giải pháp của anh ta trông giống như sau bằng cách sử dụng jQuery cho yêu cầu ajax. Điều này trả về thời gian yêu cầu tính bằng mili giây.

var start_time = new Date().getTime(); 

jQuery.get('your-url', data, 
    function(data, status, xhr) { 
     var request_time = new Date().getTime() - start_time; 
    } 
); 

Answer 2

Bạn có thể đặt thời gian bắt đầu thành var và tính chênh lệch thời gian khi hoàn thành tác vụ AJAX.

Bạn có thể sử dụng Firebug trình cắm thêm Firefox để kiểm tra hiệu suất của yêu cầu và phản hồi AJAX. http://getfirebug.com/ Hoặc bạn có thể sử dụng Charles proxy hoặc Fiddler để đánh hơi lưu lượng truy cập để xem hiệu suất, v.v.

Answer 3

Điều này sẽ không cung cấp thời gian chính xác vì javascript sử dụng event queue. Điều đó có nghĩa chương trình của bạn có thể thực hiện như thế này:

yêu cầu

• Bắt đầu AJAX
• Xử lý một click chuột sự kiện/bất kỳ dòng chờ đợi khác đang chờ các mã trong khi đó xử lý AJAX đáp ứng sẵn sàng

Bắt đầu

Thật không may là không có cách nào để có được thời gian sự kiện được thêm vào hàng đợi theo như tôi biết. Event.timeStamp trả về thời gian sự kiện được xuất hiện từ hàng đợi, xem fiddle này: http://jsfiddle.net/mSg55/.

Html:

<a href="#">link</a> 
<div></div> 

Javascript:

$(function() { 
    var startTime = new Date(); 
    $('a').click(function(e) { 
     var endTime = new Date(e.timeStamp); 
     $('div').append((endTime - startTime) + " "); 
     //produce some heavy load to block other waiting events 
     var q = Math.PI; 
     for(var j=0; j<1000000; j++) 
     { 
      q *= Math.acos(j); 
     } 
    }); 

    //fire some events 'simultaneously' 
    for(var i=0; i<10; i++) { 
     $('a').click(); 
    } 
}); 

Answer 4

Aristoteles là đúng về hàng đợi sự kiện. Những gì bạn có thể làm là trượt việc tạo dấu thời gian của bạn vào một phần mã bạn biết sẽ được thực hiện càng gần càng tốt để bắt đầu yêu cầu AJAX.

Phiên bản ổn định hiện tại của jQuery (tại thời điểm viết: 2.2.2) có khóa beforeSend chấp nhận chức năng. Tôi sẽ làm điều đó ở đó.

Lưu ý rằng trong JavaScript, tất cả các biến phạm vi toàn cầu được khai báo bên ngoài chức năng được khởi chạy ngay sau khi chương trình khởi động. Hiểu phạm vi JavaScript sẽ giúp ích ở đây.

Phần khó khăn là truy cập biến mà bạn khai báo trong hàm beforeSend trong gọi lại success. Nếu bạn khai báo cục bộ (sử dụng let), bạn không thể dễ dàng truy cập nó bên ngoài phạm vi của hàm đó.

Dưới đây là một ví dụ mà sẽ cho kết quả hơi chính xác hơn (caveat: trong hầu hết các trường hợp) cũng là nguy hiểm vì nó tuyên bố một scoped toàn cầu biến (start_time) mà có thể tương tác xấu với các kịch bản khác trên cùng một trang, v.v.

Tôi rất thích đi sâu vào thế giới của nguyên mẫu JavaScript bind của JavaScript nhưng có một chút ngoài phạm vi. Đây là một câu trả lời thay thế, sử dụng cẩn thận, và bên ngoài sản xuất.

'use strict'; 
$.ajax({ 
    url: url, 
    method: 'GET', 
    beforeSend: function (request, settings) { 
     start_time = new Date().getTime(); 
    }, 
    success: function (response) { 
     let request_time = new Date().getTime() - start_time; 
     console.log(request_time); 
    }, 
    error: function (jqXHR) { 
     console.log('ERROR! \n %s', JSON.stringify(jqXHR)); 
    } 
]); 

Answer 5

Đây là cách thích hợp để thực hiện.

$.ajax({ 
    url: 'http://google.com', 
    method: 'GET', 
    start_time: new Date().getTime(), 
    complete: function(data) { 
     alert('This request took '+(new Date().getTime() - this.start_time)+' ms'); 
    } 
}); 

https://jsfiddle.net/0fh1cfnv/1/

Answer 6

makeRequest = function(){ 

    // Set start time 
    console.time('makeRequest'); 

    $.ajax({ 
     async : true, 
     success : getRquestSuccessFunction(start_time), 
    }); 
} 

getRquestSuccessFunction = function(start_time){ 

    console.timeEnd('makeRequest'); 

    return function(data, textStatus, request) { 

    } 
} 

này mang lại cho sản lượng trong mseconds như makeRequest: 1355.4951171875ms