javascript - 如何计算请求所花费的时间？

Question

这就是我正在尝试做的事情:

1.user clicks on one of those checked icons. 2. that icon starts winking. 3. after a while (the time of request takes) the blinking stops. 4. then checked className adds

这是我的代码，它也有效:

function sleep (time) {
   return new Promise((resolve) => setTimeout(resolve, time));
}

function blink (time) {
  $(this).fadeToggle(time, function() {
    if (++n < t) {
      return blink.call(this, time)
    } else {
      n = 0;
    }
  })
}

var duration = 1000;
var n = 0;
var t = 10;
var blinks = duration / t;

$("body").on('click', '.fa-check', function(e) {
  // sleep() emulates a short waiting  time as ajax's request
  $.when(blink.call(this, blinks), sleep(duration))
  .then(() => {
     $('.fa-check').not(this).removeClass('checked');
     $(this).toggleClass('checked');
  });

});

.fa-check {
  color: #aaa;
  cursor: pointer;
}

.fa-check.checked {
  color: #44b449;
}

<script src="https://use.fontawesome.com/9e9ad91d21.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>answer1</p>
<i class="fa fa-check" aria-hidden="true"></i>
<hr>
<p>answer2</p>
<i class="fa fa-check checked" aria-hidden="true"></i>
<hr>
<p>answer3</p>
<i class="fa fa-check" aria-hidden="true"></i>

如您所见，我定义了一个名为 sleep() 的函数，它模拟此类 ajax 请求的等待时间。现在我想使用真正的ajax代码。这是我到目前为止所尝试过的:

function blink (time) {
  $(this).fadeToggle(time, function() {
    if (++n < t) {
      return blink.call(this, time)
    } else {
      n = 0;
    }
  })
}

$("body").on('click', '.fa-check', function(e) {

blink(); // start winking

    $.ajax({
        url :  urlhref,
        type : 'GET',
        dataType : 'JSON',
        success : function (acceptedanswering_system) {              
            if(acceptedanswering_system.error_msg){
                alert(acceptedanswering_system.error_msg);          

            } else {
                alert('done');
            }

            // some other codes here

        }
    });

});

我的问题:我没有将其初始化为duration变量的具体时间。因为ajax请求的时间不是恒定的，它取决于服务器等..那么我如何实现真正的ajax代码而不是模拟器功能？

Answer 1

如果我正确理解你的问题，你不想预测与远程服务器交谈所需的时间。我的答案是，你不能(除非你处于一个非常特定的环境中，但答案是，你不应该)。

无法得知请求需要多长时间。这是因为互联网的本质、不同的路由、服务器不同方面的不同负载等......

您实际上不想做的是在服务器响应时使用回调来执行某些操作。此回调可用于停止闪烁的图标。

这完全可以在 $.ajax 的成功回调中完成。

尝试对异步数据使用回调或 promise 。轮询更新可以被视为一种反模式。