how to make timer for ajax request in jquery

Question

My question is i want to get total time of ajax request.. I means when i click on button then make a ajax request and start timer and store time in button caption,after ajax request success stop timer...

My problem is

when i click on button call ajax request and after ajax request successfully then timer start.

What i want

I want to start timer before ajax request and stop after ajax request success

My html code

<input class="btn green start_timer" value="Sync" name="btn" type="button">

My js code

$(document).ready(function () {
    var setTimer = null;
    $("body").on('click', '.start_timer', function () {
        var obj = $(this);
        var start = 1;
        setTimer = setInterval(function () {
            start++;
            obj.val(start);
        }, 1000);

        $.ajax({
            type: "POST",
            url: base_url + "timerstart/start/1325",
            async: false,
            success: function (data) {
                clearInterval(setTimer);
            }
        });
        return false
    });
});

no i have 10 checkbox in my local in i want to make ajax request if checkbox checked and store timer in checkbox caption.. — Nikhil Vaghela, Nov 11 '16 at 06:05
Hi Nikhil, How much time it will taking to complete the total request in your case, your timer will start after 1 sec, if the request takes more than 1 sec, then only your code works — Krishna Maheswara, Nov 11 '16 at 06:29
Ok i will made a sample request that takes more than 2 secs and test your code and let you know, thanks — Krishna Maheswara, Nov 11 '16 at 06:31

Bhavik Shah · Answer 1 · 2016-11-11T06:35:08.767

0

You can use jQuery Global Ajax Event Handlers

Steps:

Use ajaxSend to trigger timer.

a. Display overlay.
b. Start the timer function. Use Interval to update timer on every second.
Use ajaxComplete to stop timer.

a. You can use ClearInterval to stop timer.
Calculate the difference incase you want that value to display after overlay is closed.

Notes:

Note that above mentioned global events will work as expected when there is only one ajax call at any moment of time.
You need to use Global variables to get the values from global events and calculate the difference.

edited Nov 11 '16 at 06:35

answered Nov 11 '16 at 06:22

Bhavik Shah

2,300
1
17
32

I want TIMER not total TIME. – Nikhil Vaghela Nov 11 '16 at 06:24
@NikhilVaghela: Means? You want something like stopwatch that updates the time spent every second? – Bhavik Shah Nov 11 '16 at 06:25
Yeah when i click on button timer start and after ajax request success then stop timer. – Nikhil Vaghela Nov 11 '16 at 06:26
@NikhilVaghela: I guess, you can use the same steps with a little twist for developing a Timer. I will update the answer soon. – Bhavik Shah Nov 11 '16 at 06:30
@NikhilVaghela: I have updated the answer. Let me know, if this helps or not. – Bhavik Shah Nov 11 '16 at 06:35
I have try this code and it's works if i not call ajax request..But not work if call ajax request – Nikhil Vaghela Nov 11 '16 at 06:38
@NikhilVaghela: Sad :( I cannot think of why this is not working when you are using ajax. – Bhavik Shah Nov 11 '16 at 06:41

Soni Vimalkumar · Answer 2 · 2016-11-11T07:23:03.707

0

try this below updated:

<script>
    $(document).ready(function () {
        var setTimer = null;
        $("body").on('click', '.start_timer', function () {
            StartDispalyingTimer($(this));
        });
        RunAjax = function (ele){
            $.ajax({
                type: "POST",
                async:true,
                url: "index2.php",
                success: function (data) {clearInterval(setTimer);},
                error: function (data) {clearInterval(setTimer);}
            });
        }
        StartDispalyingTimer = function (ele){var start = 1;
            setTimer = setInterval(function () {start++;ele.val((start-1));}, 1000);
            setTimeout(function(){RunAjax(ele);},1000);
        }
    });
  </script>

edited Nov 11 '16 at 07:23

answered Nov 11 '16 at 06:42

Soni Vimalkumar

1,449
15
26

In your code timer start after ajax request success.So not working – Nikhil Vaghela Nov 11 '16 at 06:48
get same output ? – Soni Vimalkumar Nov 11 '16 at 07:26

score 0 · Answer 3 · answered Nov 11 '16 at 06:54

Try this, its worked for me

$(document).ready(function () {
    var setTimer = null;

    $("body").on('click', '.start_timer', function () {
        var element = $(this);
        displayTimer(element);
    });

    function getData(element){
        $.ajax({
            type: "GET",
            async:true,
            url: "",
            success: function (data) {
               clearInterval(setTimer);
               element.val("Sync");
            },
            error: function (data) {
                 clearInterval(setTimer);
                 element.val("Sync");
            }
        });
    }


    function displayTimer(element){
        var start = 1;
        setTimer = setInterval(function () {
            start++;
            element.val(start);
        }, 1000);

        setTimeout(function(){
            getData(element);
        },2000);
    }
});

score -1 · Answer 4 · answered Nov 11 '16 at 06:19

-1

You've got async=false in the options for your ajax request. This makes your request synchronous so the execution of the script "hangs" untill the request comes back with a response. You should never use async is false.

answered Nov 11 '16 at 06:19

Sandhje Bouw

172
1
6

how to make timer for ajax request in jquery

4 Answers4