Блог

Я создал таймер, используя javascript и jquery, и я сохраняю временные метки в базе данных, когда таймер приостанавливается, возобновляется, запускается и останавливается. Здесь используется фреймворк интерфейса DJango. Но если я перейду на другую страницу моего веб-сайта на той же вкладке браузера, таймер не работает. Я хочу, чтобы таймер продолжал работать, если я не нажму на кнопку паузы. Как я могу добиться этой функциональности?

HTML-КОД:

 <div id="display"><span id="hours">00</span>:<span id="mins">00</span>:<span id="secs">00</span></div>
    <!--<div id="display2">00:00:00</div>-->
    <div class="button">
        <button id="startPause" onclick="startPause()">Start</button>
        <button id="Pause" onclick="Pause()">Pause</button>
        <div id="emptyDiv"></div>
        <a href='review'><button id='update_btn' class = 'btn btn-primary'>Mark for Review</button></a>

        <button id="complete" onclick="complete()">Mark as Complete</button>
        <div id="emptyDiv"></div>
</div>
 

КОД JAVASCRIPT:

         let sec = 00;
        let min = 00;
        let hour = 00;
        let total_sec = localStorage.getItem({{ object.id }} "/total-seconds")% 1000;
        console.log(total_sec)
        let count = null;

        let ssbtn = document.getElementById('startPause');
        let stopbtn = document.getElementById('complete');
        let display = document.getElementById('display');
        let total_time = document.getElementById('total_time');
        let work_done = document.getElementById('work_done');
        let work_done_time = document.getElementById('work_done_time');
        let ssbtn_state = 'off';
        let hrspan=document.getElementById("hours")
        let secspan=document.getElementById("secs")
        let minspan=document.getElementById("mins")

        
        let myState;
        
        hour = Math.floor(total_sec / 3600);
        min = Math.floor((total_sec - (hour * 3600)) / 60);
        sec = (total_sec - ((hour * 3600)   (min * 60)));
        window.addEventListener('load', (event) => {
            document.getElementById("Pause").disabled = true;
            secspan.innerHTML=sec;
            minspan.innerHTML=min;
            hrspan.innerHTML=hour;
        });

        function Pause(){
            myState='off';
            ssbtn_state="pause";
            document.getElementById("Pause").disabled = true;
            ssbtn.disabled = false;
            localStorage.setItem("state"   window.location.pathname, myState);
            localStorage.setItem({{ object.id }} "/total-seconds",total_sec)
            {% comment %} pause timestamp {% endcomment %}
            ajax_call(0,Math.ceil(Number(new Date())/1000),0, 0, 'OG');
            clearInterval(count)
        }
        function startPause() {
            myState=localStorage.getItem("state/task/"   {{ object.id }}  "/");
            myState='on';
            ssbtn.disabled = true;
            document.getElementById("Pause").disabled = false;
            if (myState!= null){
                ssbtn_state="resume";
                {% comment %} resume timestamp {% endcomment %}
                ajax_call(0, 0, Math.ceil(Number(new Date())/1000), 0, 'OG');
                if (myState==='on'){
                    
                    count = setInterval(() => {
                    if (sec < 59) {
                        sec  ;
                        total_sec  ;
                        secspan.innerHTML=sec;
                    } else {
                        total_sec  ;
                        sec = 0;
                        secspan.innerHTML=sec;
                        min  ;
                        minspan.innerHTML=min;
                    }
                    if (min > 59) {
                        min = 0;

                        minspan.innerHTML=min;
                        hour  ;
                        hrspan.innerHTML=hour;
                    }
                    
                    console.log("Timer running")
                    
                    },1000)}


            }
            else {
                {% comment %} Start timestamp {% endcomment %}
                ajax_call(Math.ceil(Number(new Date())/1000), 0, 0, 0, 'OG');
                ssbtn_state="on"
                console.log(myState,"is null how??")
            }

            
        }

    /*--------------------------------------------------------------------------------*/
    
    function complete(){
        localStorage.setItem({{ object.id }} "/total-seconds",total_sec)
        var result = confirm("Are you sure?");
        if(result){
            clearInterval(count);
            
            stopbtn.disabled = true;
            
            work_done.style.display = 'block';
            ajax_call(0,0,0,Math.ceil(Number(new Date())/1000), 'CM');
                if(hour == 0){
                        work_done_time.innerHTML = min ' minutes ' sec ' seconds';
                } else{
                    work_done_time.innerHTML = hour ' hours ' min ' minutes ' sec ' seconds';
                }
            }
    }
    

    function ajax_call(S_time, P_time, R_time, ST_time, stage = 'NE'){
        $.ajax({
            url: '/update_counter/',
            data: {
                'taskID': {{ object.id }},
                'S_Time': S_time,
                'P_Time': P_time,
                'R_Time': R_time,
                'ST_Time': ST_time,
                'Stage': stage,
                'csrfmiddlewaretoken': '{{ csrf_token }}',
            },
            type: 'POST'
        }).done(function(response){
            console.log(response);
        });
    };
    {% comment %}  S_Time- START Time
                    P_Time- pAUSE Time
                    R_Time - rESUME Time
                    ST_Time - STOP TIME 
    {% endcomment %}