JSFiddle - React, Tailwind, and code Playground

by black strings

HTML

<div id="main">

</div>
<div id="main2">

</div>

JavaScript

var s = "Time Out Timer Test";

var $div = $('#main');
var $div2 = $('#main2');
var counter = 0;

var time = 0;
var maxTime = 5;

//when the set time is reached, the function is fired
var timeoutEvent = setTimeout(function(){
	$div.html("event triggered!");
  time = maxTime;
}, 9000);

//first the function every set interval
var timer = setInterval(function(){
  if(time >= maxTime){
  	//kill the timeoutEvent took too long
    clearTimeout(timeoutEvent);
    clearInterval(timer);
    counter++;
    $div2.html("Timeout has stopped " + counter );
  }else{
    console.log(time);
    $div.html(time);
    time++;
  }
}, 1000);

function stopTimer(timer){

}