在AJAX调用的情况下如何计算响应和回调时间？我正在使用 js 文件和 html 文件来计算这一点。索引.html零件

Question

 
<script >
$( document ).ready(function() {
	
	 $("#acall").click(function() {
		 startTime = new Date().getTime();
		 localStorage.setItem('startTime', startTime);
		var ajaxTime= new Date().getTime();
		/* var dataLength = JSON.stringify(data).length; */
		$.ajax({ 
			
		     type: 'GET', 
		     url: 'https://jsonplaceholder.typicode.com/posts',  
		     /* url: 'http://192.168.0.101:9090/Lab/login?username=usre&password=usre',   */ 
		  //  data: { get_param: 'value' }, 
		    dataType: 'text',
		    async : true,
		   
		    start_time: new Date().getTime(),
		    success: function (data, msg) {
				//alert(data);
				 //console.log('This request took '+(new Date().getTime() - this.start_time)+' ms');
				/* document.getElementById("demo").innerHTML = data; */
				 document.getElementById("demo").innerHTML = msg;
				var ajaxEnddd = new Date().getTime();
				/* console.log("Hello"); */
				
				 document.getElementById("demorst").innerHTML ="Ajax Response Time: "+localStorage.getItem('rst')+" ms";
				 document.getElementById("democbt").innerHTML ="Ajax Callback Time: "+(ajaxEnddd - localStorage.getItem('rs4date'))+" ms";
		    }
		}) 
		/* var ajaxEnd = new Date().getTime();
		document.getElementById("demom").innerHTML = ajaxEnd - ajaxTime; */
		
	});
	 
 });
</script>
   // And the js file is
 XHR.prototype.send = function(data) {
       
        var xhr = new XMLHttpRequest();
      
    	var self = this;
        var start;
        var oldOnReadyStateChange;
        var url = this._url;
        
        if (self.readyState == 1){
        	
            var rs1date = new Date().getTime();
             localStorage.setItem('rs1date', rs1date);
         	} 
        
        function onReadyStateChange() { 
    if(self.readyState == 4 && self.status == 200) {
            	
            	
             var rs4date = new Date().getTime();
            
             localStorage.setItem('rs4date', rs4date);
             var rst = (localStorage.getItem('rs4date')-localStorage.getItem('rs1date'));
             localStorage.setItem('rst',rst);
  
            }
//From html file when I'm doing ajax call it calling js file too, and I

和JS文件是

I'm calculating this using a js file and a html file.
index.html part
<script type="text/javascript">
$( document ).ready(function() {
	
	 $("#acall").click(function() {
		 startTime = new Date().getTime();
		 localStorage.setItem('startTime', startTime);
		var ajaxTime= new Date().getTime();
		/* var dataLength = JSON.stringify(data).length; */
		$.ajax({ 
			
		     type: 'GET', 
		     url: 'https://jsonplaceholder.typicode.com/posts',  
		     /* url: 'http://192.168.0.101:9090/Lab/login?username=usre&password=usre',   */ 
		  //  data: { get_param: 'value' }, 
		    dataType: 'text',
		    async : true,
		   
		    start_time: new Date().getTime(),
		    success: function (data, msg) {
				//alert(data);
				 //console.log('This request took '+(new Date().getTime() - this.start_time)+' ms');
				/* document.getElementById("demo").innerHTML = data; */
				 document.getElementById("demo").innerHTML = msg;
				var ajaxEnddd = new Date().getTime();
				/* console.log("Hello"); */
				
				 document.getElementById("demorst").innerHTML ="Ajax Response Time: "+localStorage.getItem('rst')+" ms";
				 document.getElementById("democbt").innerHTML ="Ajax Callback Time: "+(ajaxEnddd - localStorage.getItem('rs4date'))+" ms";
		    }
		}) 
		/* var ajaxEnd = new Date().getTime();
		document.getElementById("demom").innerHTML = ajaxEnd - ajaxTime; */
		
	});
	 
 });
</script>
And the js file is
 XHR.prototype.send = function(data) {
       
        var xhr = new XMLHttpRequest();
      
    	var self = this;
        var start;
        var oldOnReadyStateChange;
        var url = this._url;
        
        if (self.readyState == 1){
        	
            var rs1date = new Date().getTime();
             localStorage.setItem('rs1date', rs1date);
         	} 
        
        function onReadyStateChange() { 
    if(self.readyState == 4 && self.status == 200) {
            	
            	
             var rs4date = new Date().getTime();
            
             localStorage.setItem('rs4date', rs4date);
             var rst = (localStorage.getItem('rs4date')-localStorage.getItem('rs1date'));
             localStorage.setItem('rst',rst);
  
            }
//From html file when I'm doing ajax call it calling js file too, and I

//我执行AJAX时也来自HTML文件，调用JS文件，然后i

Answer 1

通常，当您想知道有多少时间接受请求时，您会使用类似的内容：

const dateBegining = Date.now()
fetch("https://swapi.co/api/planets/3/")
    .then(response => response.json())
    .then(j => {
        const dateEnding = Date.now()
        console.log(`The API call took ${dateEnding - dateBegining} ms`)
        console.log(j)
    })