How to stop javascript from executing after clicking stop button?

Question

    <script>
function timer(duration, elementId, scoreID, mistakesID){
  var start = Date.now();
  var min, sec, diff;
  var scoreComputed = false;

  function timerCompute(){
    diff = duration - (((Date.now() - start) / 1000) | 0);

    min = ( diff / 60 ) | 0;
    sec = ( diff % 60 ) | 0;

    //If less than 10, add zero in front of it to keep tens place
    min = min < 10 ? "0" + min : min;
    sec = sec < 10 ? "0" + sec : sec;

    elementId.textContent = min + ":" + sec;

    if ( diff <= 0 ){
      elementId.textContent = "0:00";

      if (!scoreComputed){
        score /= (duration / 60);
        score = Math.round(score);
        scoreComputed = true;
      }

      scoreID.textContent = score;
      document.getElementById("usertext").readOnly = true;

      $("#resultsContainer").fadeIn(1500);

      if(mistakes.length > 0){
        var mistakesStr = "";

        for(var i = 0; i < mistakes.length; i++){
          mistakesStr += i > 0 ? ", " : "";
          usertextArr[mistakes[i]] = usertextArr[mistakes[i]] === "" ? "blank" : usertextArr[mistakes[i]];
          mistakesStr += usertextArr[mistakes[i]] + " instead of " + textArr[mistakes[i]];;
        }
        mistakesID.textContent = mistakesStr;
        $("#mistakesContainer").fadeIn(1500);
         $('.type-test-wrapper').css("filter","blur(3px)");
      }
      return;
    }
  };
  timerCompute();
  setInterval(timerCompute, 1000);
}

var timerStarted = false;
$('#usertext').on('keydown', function() {

  var time = 60 * 0.1,
  display = document.querySelector('#time');
  scoreDisplay = document.querySelector('#score');
  mistakesDisplay = document.querySelector('#mistakes');
  if ( timerStarted === false ){
    timer(time, display, scoreDisplay, mistakesDisplay);
    typeTest();
    timerStarted = true;
  }
});
</script>

The above script is from a typing test. When the typing test ends, the above script fades in a result box. I was trying to modify the code. I want to add a close button to the result box so that user can close the box after he viewed the result. So I added the below code to close the result box.

<script type='text/javascript'>
jQuery(document).ready(function($){
$('.close-btn, body').click(function(){
$('.type-test-wrapper').css("filter","blur(0px)");
$('#resultsContainer, #mistakesContainer').stop().fadeOut('medium');
});

});
</script>

The problem I am facing is that when I click on close button, the box fades out #resultContainer, #mistakesContainer but as soon the box gets faded, it again fades in. No matter how many times i close the box, it fades in again and again. I want that once user click on close button the box should not get displayed again. How to fix the code so that once the the box fades out, the first code doesn't again fades in the box. I am new at javascript. Thank you for help.

Live webpage here https://htmlpreview.github.io/?https://raw.githubusercontent.com/dp121112/type-testing/master/test.html

Answer 1

I think you're not clearing the interval try to assing interval as follow.

var intrvl= setInterval(timerCompute, 1000); 

and clear it when its done

scoreID.textContent = score;
document.getElementById("usertext").readOnly = true;
$("#resultsContainer").fadeIn(1500);
clearInterval(intrvl);