stack stack - 4 months ago 10
Javascript Question

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?

Answer

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