How can I show alert on my timer when timer finish

Question

I am using timer in JavaScript, I want that when my timer is finish it show me alert but right now my timer restart again with same time can any one guide me. how can I show alert in my timer when it finish.

// properties
var count = 0;
var counter = null;

window.onload = function() {
  initCounter();
};

function initCounter() {
  // get count from localStorage, or set to initial value of 1000
  count = getLocalStorage('count') || 1000;
  counter = setInterval(timer, 1000); //1000 will  run it every 1 second
}

function setLocalStorage(key, val) {
  if (window.localStorage) {
    window.localStorage.setItem(key, val);
  }

  return val;
}

function getLocalStorage(key) {
  return window.localStorage ? window.localStorage.getItem(key) : '';
}

function timer() {
  count = setLocalStorage('count', count - 1);
  if (count == -1) {
    clearInterval(counter);
    return;
  }

  var seconds = count % 60;
  var minutes = Math.floor(count / 60);
  var hours = Math.floor(minutes / 60);
  minutes %= 60;


  document.getElementById("timer").innerHTML = seconds + "  seconds left to complete this transaction"; // watch for spelling
}

<div id="timer"></div>

Answer 1

The issue you are facing is related to count. You set it to 1000. So you will have to wait 1000 min before your function clearInterval(timer) is executed. You can try the following:

Timer restarts after reloading the page

<script type="text/javascript">
  // properties
  var count = 0;
  var counter = null;

 window.onload = function() {
    initCounter();
  };

 function initCounter() {
    // get count from localStorage, or set to initial value of 1000
    count = 6000;
    counter = setInterval(timer, 1000); //1000 will  run it every 1 second
  }

 function timer() {
    count = count -1;

   var seconds = count % 60;
    var minutes = Math.floor(count / 60);
    var hours = Math.floor(minutes / 60);
    minutes %= 60;

   if(seconds === 0)
   	{
		clearInterval(counter);
                alert("terminated");
        }
   document.getElementById("timer").innerHTML =  seconds +  "  seconds left to complete this transaction"; // watch for spelling
  }
 </script>


 <div id="timer"></div>

Timer remains unchanged even after restart

<script type="text/javascript">
  // properties
  var count = 0;
  var counter = null;

 window.onload = function() {
    initCounter();
  };

 function initCounter() {
    // get count from localStorage, or set to initial value of 1000
    if(!count || count < 0)
    {
        count = 1000;
    }
    counter = setInterval(timer, 1000); //1000 will  run it every 1 second
  }

 function setLocalStorage(key, val) {
    if (window.localStorage) {
      window.localStorage.setItem(key, val);
    }

   return val;
  }

 function getLocalStorage(key) {
    return window.localStorage ? window.localStorage.getItem(key) : '';
  }

 function timer() {
    count = setLocalStorage('count', count - 1);

   var seconds = count % 60;
    var minutes = Math.floor(count / 60);
    var hours = Math.floor(minutes / 60);
    minutes %= 60;

   if(seconds === 0)
    {
        clearInterval(counter);
        alert("terminated");
        }
   document.getElementById("timer").innerHTML =  seconds +  "  seconds left to complete this transaction"; // watch for spelling
  }
 </script>


 <div id="timer"></div>

It is not a snippet as the first one, because localstorage are disabled in snippet of stackoverflow