How to Stop a Settimeout Loop

let i = 0;let sett;let active = true   // should the loop continue?function timeOut(counter) {      if (counter < 10){      sett = setTimeout(function () {        $.get("./test3.php", {data_id: counter}, (data) => {            console.log(data);            i++;            if (active) timeOut(i); // only if active        });      }, 1000);    } else {      alert("Done!");    }}timeOut(i);function clickStop() {    active = false      // stop loop    clearTimeout(sett); // and clear current timeout} 

Breaking out of setTimeout loop

Instead of setting all those timers, create one continuous timer with setInterval:

var counter = 0;

var timer = setInterval(function () {

    console.log("turn no. " + counter);

    if (table.game.playerWon) {
        console.log('Player won');
    }

    if (counter >= 75 || table.game.playerWon) {
        clearInterval(timer);
    }

    counter++;

}, 100);

If your turns should take 500ms, change that last 100 to 500.

Stop setTimeout loop, activated after click on button

This is exactly what you want (you can remove the console stmt after testing),

<script>
  document.getElementById("addurls").onclick = function () {
    var allurls  = document.getElementById("allurls"); //$('#allurls').val().split('\n');
    var urls  = allurls.value.split('\n');
    var el    = document.getElementById("indexer");
    var index = 0;

    timer = setTimeout(function rotate() {

      if (index === urls.length) {
        clearTimeout(timer);
        return true;
      }

      el.src = urls[index];
      console.log("TEST: ", index);
      index++;

      timer = setTimeout(rotate, 2000);
    }, 0);
  };
</script>

Immediately stop a setTimeout loop without finishing current cycle

Your problem is in the flit() function - you need to assign references to the setTimeout calls so you can call clearTimeout on them. Right now, you're stopping flit() from being called in the select() method, but the two timers are still queued to execute in the future.

How to stop the setTimeout or setInterval inside loop?

How about you do it this way:

1. Don't use a while loop because the while loop will call setTimeout many times and then you will have to clear ALL of them to pause. So it is simpler to not use the while loop
2. When the function is called, let it set a timeout again after it is run.
3. This means when toRepeat in my example below runs, it will create a timeout to run again so it runs the next step. Then it runs again and calls setTimeout again and so on until curStp is less than totalStps

Here is an example with comments, let me know if anything needs clarification.

let flag = 0;
const delay = 300;
const totalStps = 102;
var curStp = 0;
var timeout = null;

function toRepeat() {
    let stp = curStp;
    console.log("curStp = " + curStp);
    
    curStp = stp+1;   // this is done by setState.
    console.log("flag " + flag + " timeout " + timeout);

    // check for pause
    if(flag === 1) {
      console.log("break the loop");
      console.log('clearing timeout = ', timeout);

      // dont continue because we paused
      return;
    }

    // each timeout will call another timeout again for the next step unless we already finished or we have paused
    // better to have this `curStp < totalStps`
    if(curStp != totalStps) {
      // setup another timeout for next step
      timeout = setTimeout(toRepeat, delay);
    } else {
      // we already finished
    }
}

function mouseup() {
  // need to set the flag back to 0 so pressing "Run Code" doesn't immediately pause again
  flag = 0;

  var timeout = setTimeout(toRepeat, delay);
}

function pause() {
  flag = 1;
  console.log("Value of flag in pause()  " + flag + " curStp " + curStp);
  let stp = curStp;
  curStp = stp;   // this is done by setState.
}

How to terminate endless while loop via setTimeout in Javascript

JavaScript runs a single event loop. It won't stop in the middle of a function to see if there are any events (such as clicks or timeouts) that would trigger a different function.

In short: It won't run the timed function until the while loop has finished.

To do this sort of thing, you'd normally have an event driven iterator.

var i = 0,  s = false;
setTimeout(function() {  s = true;  console.log("Timeuot!!!");  console.log("s value is " + s);}, 1000);
next();
function next() {  if (s) {    return done();  }  console.log({    s, i  });  i++;  setTimeout(next, 0);}
function done() {  console.log("iterations: " + i);}