Timer is not working when entering on the application with different users-CodePudding

I have a problem with a countdown, I have the code posted on here(codepen is not working for a reson): HTML:

<div >
      <div >
        <div >
          <p >
          </p>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
        </div>
      </div>
    </div>
    <div >
      <h1 >Răm&acirc;i cu noi. Acum &icirc;ţi verificăm aplicaţia!</h1>
      <p >Pregătirea ofertei poate dura p&acirc;nă la <strong>5 minute</strong>.</p>
    </div>
    <div  style="display: none;">
      <h1 >Aplicaţia ta este &icirc;n curs de verificare</h1>
      <div >
        <div >
        </div>
        <div >
          <div >Ne pare rău, durează mai mult dec&acirc;t ne aşteptam.</div>
          <div >Poţi inchide această pagină in siguranţă, te vom contacta noi &icirc;n cur&acirc;nd.</div>
        </div>
      </div>
      <p >Vei primi o notificare prin SMS şi e-mail c&acirc;nd suntem gata să continuăm.</p>
    </div>

Jquery:

var loanId = formData.id;
var formBusinessStatusId = formData.model.businessStatusId != null ? formData.model.businessStatusId : ebs.getCurrentEntityData().businessStatusId;

window.utils.checkChangedBusinessStatusAndRefreshFormNormal(loanId, formBusinessStatusId, false);

const TIME_LIMIT = 300;
var waitingTimeItem = localStorage.getItem(`waitingTime-${loanId}`);
console.log('waitingtime ' waitingTimeItem)
var cicleIndexItem = localStorage.getItem(`circleIndex-${loanId}`);
let timePassed = (waitingTimeItem != TIME_LIMIT && waitingTimeItem != null && waitingTimeItem != NaN) ? (TIME_LIMIT -  waitingTimeItem) : 0;
let timeLeft = (waitingTimeItem != TIME_LIMIT && waitingTimeItem != null && waitingTimeItem != NaN) ? waitingTimeItem : TIME_LIMIT;
timerInterval = null;
let circles = Array.from($('.tbi-phone-verification-loader').children());
let circleIndex = (cicleIndexItem != 0 && cicleIndexItem != null && cicleIndexItem != NaN) ? cicleIndexItem : 0;
// let circleIndex = 0;
let lastCircleIndex;
let elapsedTime = 30;

// console.log(waitingTimeItem)

function onTimesUp() {
    // console.log("Boala copiilor");
    $('.tbi-phone-verification-loader').hide();
    $('.timer-on').hide();
    $('.timer-off').show();
    clearInterval(timerInterval);
}

if (waitingTimeItem == 1 || waitingTimeItem == "1") {
    onTimesUp();
} else {
    localStorage.setItem(`waitingTime-${loanId}`, 1);
}

var loaderTextElement = $('.tbi-phone-verification-loader-text');
loaderTextElement.replaceWith(`<p ><span id="base-timer-label" >${formatTime(timeLeft)}</span></p>`);

startTimer();

function startTimer() {
    if ((waitingTimeItem == 1 || waitingTimeItem == "1")) {
            onTimesUp();
    } else {
        timerInterval = setInterval(() => {
        timePassed = timePassed   1;
        // console.log(TIME_LIMIT);
        timeLeft = TIME_LIMIT - timePassed;
        localStorage.setItem(`waitingTime-${loanId}`, timeLeft);
        if (document.getElementById("base-timer-label") != null) {
            document.getElementById("base-timer-label").innerHTML = formatTime(timeLeft);
        }
        // var formattedTimeLabel = $('.base-timer__label').html();
        // formattedTimeLabel.replaceWith(`${formatTime(timeLeft)}`);

        if (timeLeft === 1) {
            onTimesUp();
        }
    }, 1000);
    }
}

function formatTime(time) {
    if(circleIndex < 31) {
        if (circles.length > 1) {
            lastCircleIndex = circleIndex;
            localStorage.setItem(`circleIndex-${loanId}`, circleIndex);
            for (var i = 0; i < circleIndex; i  ) {
                circles[i].style.backgroundColor = "#FF6600";
                circles[i].style.width = '8px';
                circles[i].style.height = '8px';
                circles[i].style.boxShadow = 'none';
            }
            const minutes = Math.floor(time / 60);
            let seconds = time % 60;
            if (seconds % 10 == 0) {
                circles[lastCircleIndex].style.backgroundColor = "#FF6600";
                circles[lastCircleIndex].style.width = '8px';
                circles[lastCircleIndex].style.height = '8px';
                circles[lastCircleIndex].style.boxShadow = 'none';
                circleIndex  ;
            }
            circles[circleIndex].style.backgroundColor = '#FF6600';
            circles[circleIndex].style.width = '13px';
            circles[circleIndex].style.height = '13px';
            circles[circleIndex].style.boxShadow = '0px 0px 0px 5px #ffd4b7';

            if (seconds < 10) {
                seconds = `0${seconds}`;
            }

            return `${minutes}:${seconds}`;
        }
    }
}

Ignore the CSS, the countdown is important, this page is a waiting for verification page for my application, so I stored each timer inside a local storage concatenated with a LoanId(I hardcoded it for this example, but everytime is a different value). I have another function that is called on each refresh and status change:

function checkChangedBusinessStatusAndRefreshFormNormal(loanId, formBusinessStatusId, showPopup) {
    if(showPopup == null) {
        showPopup = true;
    }

    // console.log('outside interval loanid: ' loanId ' formBusinessStatusId: ' formBusinessStatusId);
    var myInterval = setInterval(function() {
        // console.log('inside interval');
        ebs.callActionByNameAsync('FTOS_CUST_CheckChangedBusinessStatus', { loanId : loanId, formBusinessStatusId : formBusinessStatusId })
        .then(function(result) {
            if(result.UIResult.Data.needRefresh) {
                clearInterval(myInterval);

                if(showPopup) {
                    window.alert('Intre timp status-ul aplicatiei a fost modificat de procese automate! Apasa OK ca sa reincarci cele mai recente detalii ale aplicatiei de credit.');
                }
                    localStorage.removeItem("circleIndex-"   loanId);
                    localStorage.removeItem("waitingTime-"   loanId);
                ebs.reload();
            }
        });
    }, 30000);
}

The problem appears on on two different users are in this step in the same time, because if one is accepted, the other's countdown start incrementing and decrementing. I used a console log on the timer and it goes like this: 256, 254, 255, 254, 253 and so on. My question is, why is this happening? The users have different timers, so I really don't understand, it may be because of clear interval?

CodePudding user response：

I suspect your issues lie's with the Async method calling the clear timer, you could use deferred promise:

https://api.jquery.com/deferred.promise/

or async callback when/then to call the same method sort of like here

jQuery deferrend; callback for waiting functions

I hope this helps