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!!

Answer 1

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 } 

Answer 2

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> 

Answer 3

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>