CODEWITHSUNDEEP
javascriptjqueryhtmlajax
stack
stack

Reputation: 10228

How can I calculate the time a request takes?

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?

Upvotes: 0

Views: 114

Answers (2)

Sven van de Scheur
Sven van de Scheur

Reputation: 1903

If I understand your question correctly, you wan't to predict the time it takes to talk to a remote server. My answer would be, you can't (unless you are in a very specific environment, but the answer then would be, you shouldn't).

There is no way of telling how long a request is going to take. This is because of the very nature of the internet, different routes, different loads on different aspects of the server etc...

What you actually wan't to do is use a callback to do something whenever the server responds. This callback can be use to stop the blinking icon.

This is perfectly possible to do in the success callback of $.ajax.

Try to use callback or promises for async data. Polling for updates can be considered an anti pattern.

Upvotes: 2

freakish
freakish

Reputation: 56467

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();
        }
    });
});

Upvotes: 1

Related Questions