我如何计算请求所需的时间？ [英] How can I calculate the time a request takes?

问题描述

1.用户点击其中一个检查图标。那个图标开始眨眼。 3.过了一会儿（请求时间），闪烁停止。 4.然后检查className添加

下面是我的代码，它也适用：

function sleep（time）{return new Promise（（resolve）=> setTimeout（resolve， time））;}函数blink（time）{$（this）.fadeToggle（time，function（）{if（++ n

  .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-checkaria-hidden =true> ;< / i>< hr>< p> answer2< / p>< i class =fa fa-check checkedaria-hidden =true>< / i>< hr>< ; p> answer3< / p>< i class =fa fa-checkaria-hidden =true>< / i>  

sleep（）的函数，它模拟这种ajax请求的等待时间。现在我想使用真正的Ajax代码。这是我到目前为止所尝试的：

 函数blink（time）{
 $（this）.fadeToggle （time，function（）{
 if（++ n  return blink.call（this，time）
} else {
n = 0; $ b （'click'，'.fa-check'，function（e）{$ b $（$ b $）
 
 
 $（body）。 b 
 blink（）; //开始闪烁
 
 $ .ajax（{
 url：urlhref，
类型：'GET'，
 dataType： 'JSON'，
成功：函数（acceptedanswering_system）{
 if（acceptedanswering_system.error_msg）{
 alert（acceptedanswering_system.error_msg）; 
 
} else {
 alert（'done'）; 
} 
 
 //这里的其他代码
 
} 
}）; 
 
}）; 
  

我的问题：我没有特定的时间来初始化它作为持续时间变量。因为ajax请求的时间不是恒定的，所以它取决于服务器等等。所以我怎样才能实现一个真正的ajax代码而不是那个模拟器函数？

解决方案

因此，从评论来看，你实际需要的是一个更好的闪光灯。看看这个：

  var Blinker = function（el，time）{
 this.el = el; 
 this.time = time; 
 this.running = false; 
 this._fader = this._fade.bind（this）; 
}; 
 Blinker.prototype = {
 _fade：function（）{
 if（！this.running）{
 return; 
} 
 this.el.fadeToggle（this.time，this._fader）; 
}，
 start：function（）{
 this.running = true; 
 this._fader（）; 
}，
 stop：function（）{
 this.running = false; 
} 
}; 
  

和用法：

 （'click'，'.fa-check'，function（e）{
 var blinker = new Blinker（$（this），100）; 
 blinker.start（）; 
 $ .ajax（{
 //一些其他代码
 complete：function（）{
 blinker.stop（）; 
} 
}）; 
}）; 
  

This is what I'm trying to do:

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

Here is my code which works as well:

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>

As you see, I've defined a function named sleep() which emulates the waiting time of such an ajax request. Now I want to use real ajax codes. Here is what I've tried so far:

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

        }
    });

});

My question: I don't have a specific time that I initialize it as duration variable. Because the time of an ajax request isn't constant, it depends on the server and etc .. so how can I implement a real ajax code instead of that emulator function?

解决方案

So, judging from comments what you actually need is a better blinker. Have a look at this:

var Blinker = function(el, time) {
    this.el = el;
    this.time = time;
    this.running = false;
    this._fader = this._fade.bind(this);
};
Blinker.prototype = {
    _fade: function() {
        if (!this.running) {
            return;
        }
        this.el.fadeToggle(this.time, this._fader);
    },
    start: function() {
        this.running = true;
        this._fader();
    },
    stop: function() {
        this.running = false;
    }
};

and usage:

$("body").on('click', '.fa-check', function(e) {
    var blinker = new Blinker($(this), 100);
    blinker.start();
    $.ajax({
        // some other code
        complete: function() {
            blinker.stop();
        }
    });
});

这篇关于我如何计算请求所需的时间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！