Javascript multiple countdown timer for different instants with dynamic arguments by ajax call

Question

I searched everywhere on stackoverflow and google it but still I did not found any solution, so I am posting it here. Please help me to resolve it.

1.Normal e commerce site with add products to cart without refreshing the page and has to start countdown timer for each products seperately(It's a unique product and has to buy it within the time, jiust like auction).

2.When the user clicks on checkout has to freeze the timer and if he comes back to shop again has to start the timer where it has freeze.

So here is my code for onclick add to cart function

<input type="button" onClick = "cartAction('add','productId','Timer')" />

In script

function cartAction(action, id, time) {
        var queryString = "";
        if (action != "") {
            switch (action) {
                case "add": 
                    queryString = 'action=' + action + '&id=' + id + '&quantity=1' + '&time=' + time;
                    break;
                case "remove":
                    queryString = 'action=' + action + '&id=' + id;
                    break;
                case "empty":
                    queryString = 'action=' + action;
                    break;
            }
        }
        jQuery.ajax({
            url: "ajax_action.php",
            data: queryString,
            type: "POST",
            success: function (data) {
                $("#cart-item").html(data);
                $("#amount-top").html($("#total").val());
                $("#item-total").html($("#carttotal").val());
                if (action != "") {
                    switch (action) {
                        case "add":                                
                            $("#add_" + id).hide();
                            $("#added_" + id).show();
                            break;
                        case "remove":                                
                            $("#add_" + id).show();
                            $("#added_" + id).hide();
                            break;
                        case "empty":
                            $("#amount-top").html(0);
                            $("#item-total").html(0);
                            break;
                    }
                }
            },
            error: function () {
            }
        });
    }

And finally in ajax_action call is

here

How to freeze timer when checkout clicked and how to release the timer when user wants to add some more products to cart..

Thanks in advance.

One Question. What If the user clicks on checkout and the timer freezes and he closes the browser. Will the timer be frozen till the time he visits the website again because that will give him an upper hand on others :) — Ashish Choudhary
– Ashish Choudhary, Commented Oct 15, 2015 at 10:05
Nope at checkout page, we have one more timer, he has to order within that time, if he fails then session will be cleared and the products will be released again. Same case if he close the browser. — Sudhir Koimattur
– Sudhir Koimattur, Commented Oct 15, 2015 at 10:10
Just like in.bookmyshow.com checkout :) You cannot trust client side only for this task. You have to run the timer on server side as well. and then make frequent calls to check server timer to match client side timer. I will post the solution as an answer. — Ashish Choudhary
– Ashish Choudhary, Commented Oct 15, 2015 at 10:13

Shilly · Accepted Answer · 2015-10-15 10:07:36Z

1

Clientside you can work with timers to show like a clock countdown. But I wouldn't save those timers if I were you, since it'll become a mess to keep everythign synced up every time the user closes browser / opens a new tab / any other action that stops setTimeout.

So what about using the timers clientside for showing the countdown clock, but just have a 'added to shop' timestamp for each product and a 'expires' timestamp as well. Then you won't have to mess with syncing timers when the user returns to the page, just do expiration - current to get the time remaining and set a new timer for the clock clientside instead of trying to resync an old timer.

Serverside just only add products to the cart if the current time is smaller than the expiration.

answered Oct 15, 2015 at 10:07

Shilly

8,5991 gold badge21 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashish Choudhary · Accepted Answer · 2015-10-15 10:36:12Z

You can start the timer server side. On clicking Add to cart button, send a ajax request to server to start a timer. Server will log the current time as start time and a end time(say 10 mins after the current time) in a temp DB table. This temp table will store all valid user timers.

The start ajax request will receive end time as response so that you know when to end the timer on client side. when the user reaches checkout page, send one more request to the server to check server side timer. The server will check in the temp table if the current time is less than the end time. If yes, it will set the freezetime as the (current time + allowed checkout time) in the temp table and return the freezetime like before else it will return timeout. This will you will know if the user has manipulated client side timer. Also closing the browser issue will be resolved with server side timer as well because its not affected with browser closing.

So next time when the user visits and you make the first call to start/check the timer, you will check if the current time is greater that the freeze time. If yes, then subtract freeze time from end time and check if the current time is less than the new end time then return the new end time and update temp table with new end time. IF current time is greater than the new end time then return timeout and delete the entry/row from the temp table.

Collectives™ on Stack Overflow

Javascript multiple countdown timer for different instants with dynamic arguments by ajax call

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related