JSFiddle - React, Tailwind, and code Playground

by NabiKAZ

HTML

<input id="inp_delay" value="1000">
<button id="btn_start">START</button>
<button id="btn_stop">STOP</button>
<br>
<i>See output in the console log.</i>

JavaScript

//@NabiKAZ

document.getElementById("btn_start").addEventListener("click", function() {
  console.log("Starting...");
  loop_flag = true;
  loop_func();
});
document.getElementById("btn_stop").addEventListener("click", function() {
  console.log("Stoping...");
  loop_flag = false;
});

var n = 0;

var loop_flag = false;
var loop_func = async function() {
  if (!loop_flag) {
    console.log("STOP.");
    return;
  }

  //body main function inhere
  n++;
  console.log(log_time(), n);

  var res = await fetch('http://localhost:1234/sample_sleep.php?s=2')
    .then(response => response.json())
    .then(data => {
      return data;
    });
  console.log(log_time(), res);
  ////


  if (loop_flag) {
    setTimeout(loop_func, document.getElementById("inp_delay").value);
  } else {
    console.log("STOP.");
  }
}


function log_time() {
  var date = new Date();
  return String(date.getHours()).padStart(2, "0") +
    ':' + String(date.getMinutes()).padStart(2, "0") +
    ':' + String(date.getSeconds()).padStart(2, "0") +
    '.' + String(date % 1000).padStart(3, "0");
}