JSFiddle - React, Tailwind, and code Playground

by ojtramp

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="counter">
0
</div>
<button class="startFn" timeout="5">
Start Limited 5s
</button>
<button class="startFn" timeout="-1">
Start Unlimited
</button>

<button class="stopFn">
Stop
</button>

JavaScript

var reeling_time = 500;
var timeoutID;


$(".startFn").click( function() {

   reeling_time = parseInt($(this).attr("timeout"));
   console.log("Counting down from " + reeling_time);
   
   //Do something until countdown resolves or stopNow has been ordered
   while ( reeling_time != 0 ) {
   
   		console.log(reeling_time);
			timeoutID = window.setTimeout(rotateWheel, 1000);
   
   }

});


function rotateWheel() {

    $("#counter").text( parseInt($("#counter").text()) + 1  );

    // Countdown here, although this is not time based, it is just counting the number of times the function is called
    reeling_time = reeling_time - 1;

}


$(".stopFn").click( function() {
  window.clearTimeout(timeoutID);
});