Stop loop function setTimeout

Question

I have a loop using setTimeout like bellow:

<button onclick="clickStop()">stop</button>

<script type="text/javascript">
    let i = 0;
    let sett;
    function timeOut(counter) {   
        sett = setTimeout(function () {
            $.get("./test3.php", {data_id: counter}, (data) => {
                console.log(data);
                i++;
                timeOut(i);
            });
        }, 1000);
        if(counter >= 10) {
            clearTimeout(sett);
            alert("Done!");
        }
    }
    timeOut(i);
    function clickStop() {
        clearTimeout(sett);
    }
</script>

But when i click button stop it's not working, help me!!

I'm try and it's not working. ./test3.php takes 2 ~ 3 seconds to return results. When I press stop while. ./test3 in process, it will not work. — Evangeline
– Evangeline, Commented Sep 23, 2018 at 5:21
please be clear when you say it's not working. What is not working ? — Ravi
– Ravi, Commented Sep 23, 2018 at 5:22
This is going to be pretty fragile because if you cancel the timeout before the $.get returns, the callback will just start it again when it $.get call the callback. Maybe you could have clickStop set a flag that is checked before $.get calls the function. — Mark
– Mark, Commented Sep 23, 2018 at 5:23
So just a heads up, typically XHR calls should not be made in a loop. It can get expensive, or bad — Sterling Archer
– Sterling Archer, Commented Sep 23, 2018 at 5:26

Mark · Accepted Answer · 2018-09-23 05:34:23Z

2

You can clear the timeout and also set a flag that will alert the callback in $.get that it shouldn't call timeOut() when it returns:

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
}

answered Sep 23, 2018 at 5:34

Mark

92.7k8 gold badges116 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Konda · Accepted Answer · 2018-09-23 05:28:05Z

0

Your JS seems to be working just fine, see below, the counter increments and stop when I click on the stop button. the issue is with $.get("./test3.php" ...

can you elaborate on what the expected response of the ajax call is?

Also if you can describe what you're trying to do, we can give you some pointers on best practices, because as those who commented have said, it's generally not a good idea to run XHR/ajax calls in loops

<button onclick="clickStop()">stop</button>

<script type="text/javascript">
    let i = 0;
    let sett;
    function timeOut(counter) {   
        sett = setTimeout(function () {
            timeOut(counter+1);
            console.log(counter);
        }, 1000);
        if(counter >= 10) {
            clearTimeout(sett);
            alert("Done!");
        }
    }
    timeOut(i);
    function clickStop() {
        clearTimeout(sett);
    }
</script>

answered Sep 23, 2018 at 5:28

Konda

781 silver badge8 bronze badges

1 Comment

Evangeline Over a year ago

$ .get(" ./ test3.php "... will take about 2 ~ 3 seconds to return results. How do I stop after clicking "stop" or when the last XHR calls finish?

colxi · Accepted Answer · 2018-09-23 05:54:32Z

The timeout(i) you have inside the $.get response handler, would restart the loop even if you stopped it. You can use a flag to get control over it.

let i = 0;
let sett;
let status = true;
let url = "http://placekitten.com/200/300";

function timeOut(counter) {   
  sett = setTimeout(function () {
    $.get(url, (data) => {
      console.log(i);
      i++;
      // repeat if status flag is true
      if(status) timeOut(i);
    });
  }, 1000);
  
  if(counter >= 10) {
    clearTimeout(sett);
    status = false; // set status flag to false
    alert("Done!");
  }
}

function clickStop() {
    clearTimeout(sett);
    status = false; // set status flag to false
}

timeOut(i);

<button onclick="clickStop()">stop</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Collectives™ on Stack Overflow

Stop loop function setTimeout

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related