How to make a multiple timer not to reset in php even if the page refreshes?

Question

I already check the answer from here and so how can I make it for multiple data. In order for me to set a timer for a specific service for example. So here is my script.

            <script type="text/javascript">
            //var minutes2 = currentTime.setMinutes(currentTime.getMinutes() + 30);
            function addMinutes(date, minutes) {
                return new Date(date.getTime() + minutes*60000);
            }
            var dat = new Date();
            //var tim = addMinutes(dat, 15);
            //console.log(tim); 

            function fixIntegers(integer)
            {
                if (integer < 0)
                    integer = 0;
                if (integer < 10)
                    return "0" + integer;
                return "" + integer;
            }

            $(function () { 
                $('.btn-start-timer').click(function(){
                    var i = window.setInterval(function(){

                        var future = addMinutes(dat, 60);
                        //var future = new Date("Dec 12 2013 22:10:00 GMT-0800 (Pacific Standard Time) ");
                        var now = new Date();
                        //console.log(tim);
                        var difference = Math.floor((future.getTime() - now.getTime()) / 1000);

                        var seconds = fixIntegers(difference % 60);
                        difference = Math.floor(difference / 60);

                        var minutes = fixIntegers(difference % 60);
                        difference = Math.floor(difference / 60);

                        var hours = fixIntegers(difference % 24);
                        difference = Math.floor(difference / 24);

                        var days = difference;
                    /*  $(this).parent().parent().find('.timer #seconds').text(seconds + "s");
                        $(this).parent().parent().find('.timer #minutes').text(minutes + "m");
                        $(this).parent().parent().find('.timer #hours').text(hours + "h");
                        $(this).parent().parent().find('.timer #days').text(days + "d");*/

                        $(".timer #seconds").text(seconds + "s");
                        $(".timer #minutes").text(minutes + "m");
                        $(".timer #hours").text(hours + "h");
                        $(".timer #days").text(days + "d");
                        if(hours == 0 && minutes == 0 && seconds == 0){
                             window.clearInterval( i );   
                            alert('times up');
                        }
                    }, 1000);

                });
            });

        </script>

And here is my the html:

        <table cellpadding="10">
            <tr>
                <th>Timer</th>
                <th>&nbsp;</th>
            </tr>
            <tr>
                <td class="timer">
                    <span id="days"></span>
                    <span id="hours"></span>
                    <span id="minutes"></span>
                    <span id="seconds"></span>
                </td>
                <td><button type="button" class="btn-start-timer">Start Now</button></td>
            </tr>
            <tr>
                <td class="timer">
                    <span id="days"></span>
                    <span id="hours"></span>
                    <span id="minutes"></span>
                    <span id="seconds"></span>
                </td>
                <td><button type="button" class="btn-start-timer">Start Now</button></td>
            </tr>
        </table>

How can I make the time not to reset once it is started?

@MichaelVilleneuve How can I make the time not to reset once it is started? And if time is up it will update the status of the service — leonardeveloper, Dec 12 '13 at 22:50

Michael Villeneuve · Answer 1 · 2013-12-12T23:45:08.733

0

Use the event :

onbeforeunload

To detect when your user leave your page. Then, send an ajax request. To handle your request, you simply want to save whatever information in a $_SESSION variable in posted.php.

// posted.php
session_start();
if ( isset ( $_POST['hours'] && isset ( $_POST['minutes'] && isset ( $_POST['seconds'] && )
{
    $_SESSION['hours'] = $_POST['hours'];
    $_SESSION['minutes'] = $_POST['minutes'];
    $_SESSION['seconds'] = $_POST['seconds'];
}

Then when your new page load / refresh you should have in your javascript your variable that are initialized.

var hours = <?php if ( isset($_SESSION['hours']) ) echo $_SESSION['hours'] else 0; ?>;
var minutes = <?php if ( isset($_SESSION['minutes']) ) echo $_SESSION['minutes'] else 0; ?>;
var seconds = <?php if ( isset($_SESSION['seconds ']) ) echo $_SESSION['seconds '] else 0; ?>;

Now understand that this is a shot in the dark since I have 0 idea about the way your application is built. If you're using some kind of framework it might not be that easy but if you're programming something small or procedural, then this will fit your needs.

EDIT: I understand that you have multiple timer, instead of using

$_SESSION['hours']

use

$_SESSION['idOfTimer']['hours']

Each timer will have his own timer.

edited Dec 12 '13 at 23:45

answered Dec 12 '13 at 22:59

Michael Villeneuve

3,933
4
26
40

I'm not using any framework it's just raw PHP and to give you an idea on what i'm doing here is my previous question http://stackoverflow.com/questions/20542948/multiple-timer-using-countdown-js-in-php" since I didn't use `countdown.js` for this one. Thanks and will try this one. – leonardeveloper Dec 12 '13 at 23:02
1

There likely won't be enough time for this ajax request to complete prior to page exit unless you call `ignore_user_abort(true);` at the top of the PHP script – Rob M. Dec 12 '13 at 23:02
@MichaelVilleneuve Since it is multiple what if the user click again the other `start button` i think the value for the session will be replace with new value? – leonardeveloper Dec 12 '13 at 23:09
Don't know why someone downvoted -_- don't think it's that bad ?!! Anyway I don't understand what you mean by "since it's multiple" ? If he click on the button you simply need to send a new Ajax request with all value to 0. – Michael Villeneuve Dec 12 '13 at 23:31
does the value of the $_SESSION['hours'] for example will not be replace? if multiple button will be clicked? I'll upvote it – leonardeveloper Dec 12 '13 at 23:41
And where to get the `idOfTimer`? – leonardeveloper Dec 12 '13 at 23:57
Well idOfTimer would the ID of the button you click. Something like : $("#idOfButton").on("click", function() { //send your request with the $(this).attr("id") }) – Michael Villeneuve Dec 13 '13 at 00:01
Then how can I check if the `time` for this service is up or equal to 0? Am I going to use for loop? – leonardeveloper Dec 13 '13 at 00:05
Well if the timer is not set it's 0? If it's already set you take whatever value? – Michael Villeneuve Dec 13 '13 at 00:07
Oh I tought your timer increment, but I see it's the opposite. Do you want your timer to continue while your user is gone ? – Michael Villeneuve Dec 13 '13 at 00:17
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/43086/discussion-between-leonard-drapeza-and-michael-villeneuve) – leonardeveloper Dec 13 '13 at 00:24

score 0 · Answer 2 · answered Dec 12 '13 at 23:03

0

Save the hour, minute, sec in $_SESSION or $_COOKIE['time'] or localStorage and then retrieve the value from that.

answered Dec 12 '13 at 23:03

user2227606

71
7

How to make a multiple timer not to reset in php even if the page refreshes?

2 Answers2