Resetting a Countdown Timer When It Is Shown - Javascript / Modal

Question

Everything is working correctly including the snippet but the 30 second countdown timer I have does not reset to 00:30 when it is shown ... it is continuously running over and over.

$(document).ready(initApp);

function initApp() {
  console.debug('initApp');
  const activityModal = $('#modal101');
  activityModal.hide();
  const activityMaxDelayWarning = 3 * 1000; //  (display message at 3 seconds of inactivity) 
  const activityMaxDelay = 60 * 1000; //  (total time to logout) 60s = 1min
  const activityCheckInterval = 5 * 1000; 

  activityRegister();
  document.addEventListener('mousemove', activityRegister); // look for mouse movement
  document.addEventListener("scroll", activityRegister); // look for scrolling
  setInterval(activityCheck, activityCheckInterval);

  function activityRegister() {
    popupHide();
    activityLast = Date.now();
    console.debug('Activity set to', activityLast);
  }

  function userIsLogguedIn() {
    //DO it
    return true;
  }

  function activityCheck() {
    const delay = Date.now() - activityLast;
    console.debug("Activity delay is", delay);

    if (!userIsLogguedIn()) {
      console.debug("     user is not logged in");
      return;
    }
    if (delay > activityMaxDelay) {
      console.debug("     will logout");
      logout();
    } else if (delay > activityMaxDelayWarning) {
      console.debug("     will show warning");
      popupShow();
    }
  }

  function popupShow() {
    activityModal.show();
  }

  function popupHide() {
    activityModal.hide();
  }

  function logout() {
    window.location.href = 'https://stackoverflow.com';
  }
}

function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}

function resetTimer() {
  timer = 30 * 1;
}

window.onload = function() {
  var fiveMinutes = 30 * 1,
    display = document.querySelector('#time');
  startTimer(fiveMinutes, display);
};

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>



  <div>
    <h3>Dont move and a message will appear...</h3>
  </div>



  <div id="modal101" class="modal" tabindex="-1" role="dialog" style="background-color: rgba(255, 0, 0, 0.88);">
    <div class="modal-dialog" role="document">
      <div class="modal-content centered" style="max-width:550px;background-color:#323234;color:white;">
        <div class="modal-header">
          <h1 class="modal-title" style="text-align: center;">Warning!!!!</h1>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span id="time" style="color:white;">00:30</span>
          </button>
        </div>
        <div class="modal-body">
          <p>You will be redirected due to inactivity in 30 seconds</p>
        </div>
      </div>
    </div>
  </div>

Could someone help me make it start from 00:30s everytime it is displayed in the modal, so no matter what it always starts from 30 seconds :)

Answer 1

First of all, the code is very unorganized, I don't know what you are going to do exactly. Having direct discussion with @Merky, I was able to understand a bit.

And here are the solution I presume. Need to do re-touch but this will address the underlying issue.

<script>
$(document).ready(initApp);

function initApp() {
  console.debug('initApp');
  const activityModal = $('#modal101');
  activityModal.hide();
  const activityMaxDelayWarning = 3 * 1000; //  (display message at 3 seconds of inactivity) 
  const activityMaxDelay = 60 * 1000; //  (total time to logout) 60s = 1min
  const activityCheckInterval = 5 * 1000; 

  activityRegister();
  document.addEventListener('mousemove', activityRegister); // look for mouse movement
  document.addEventListener("scroll", activityRegister); // look for scrolling
  setInterval(activityCheck, activityCheckInterval);

  function activityRegister() {
    popupHide();
    activityLast = Date.now();
    console.debug('Activity set to', activityLast);
  }

  function userIsLogguedIn() {
    //DO it
    return true;
  }

  function activityCheck() {
    const delay = Date.now() - activityLast;
    console.debug("Activity delay is", delay);

    if (!userIsLogguedIn()) {
      console.debug("     user is not logged in");
      return;
    }
    if (delay > activityMaxDelay) {
      console.debug("     will logout");
      logout();
    } else if (delay > activityMaxDelayWarning) {
      console.debug("     will show warning");
      popupShow();
    }
  }

  function popupShow() {
    if(!activityModal.is(':visible')) {
        resetTimer();
        activityModal.show();
    }
  }

  function popupHide() {
    activityModal.hide();
  }

  function logout() {
    // don't do this here.
    //window.location.href = 'https://stackoverflow.com';
  }
}

function updateTimerDiv(display) {
    var minutes = parseInt(window.timer_val / 60, 10)
    var seconds = parseInt(window.timer_val % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;
}

function startTimer(duration, display) {
  window.timer_val = duration;
  var minutes, seconds;
  setInterval(function() {
    updateTimerDiv(display);    
    if (--window.timer_val < 0) {
        window.timer_val = duration;
    }
  }, 1000);
}

function resetTimer() {
  console.log("reset timer");
  window.timer_val = 30 * 1;
  updateTimerDiv(document.querySelector('#time'));
}

window.onload = function() {
  var fiveMinutes = 30 * 1,
    display = document.querySelector('#time');
  startTimer(fiveMinutes, display);
};
</script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>



  <div>
    <h3>Dont move and a message will appear...</h3>
  </div>



  <div id="modal101" class="modal" tabindex="-1" role="dialog" style="background-color: rgba(255, 0, 0, 0.88);">
    <div class="modal-dialog" role="document">
      <div class="modal-content centered" style="max-width:550px;background-color:#323234;color:white;">
        <div class="modal-header">
          <h1 class="modal-title" style="text-align: center;">Warning!!!!</h1>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span id="time" style="color:white;">00:30</span>
          </button>
        </div>
        <div class="modal-body">
          <p>You will be redirected due to inactivity in 30 seconds</p>
        </div>
      </div>
    </div>
  </div>