pause timeoutfunction with jQuery stop()

Question

I have two buttons. The first one lets appear an alert with a delay of 3 seconds and another one 3 seconds later. The second button must be able to pause the setTimeout function.

So when the first alert has appeared and I click on 'pause' the second should not show up. I know I'm close to the solution, but it still doesn't work. My code is:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#start").click(function () {
                setTimeout(myFunction, 3000);
                setTimeout(myFunction, 6000);
            });
            $("#stop").click(function () {
                $("myFunction").stop();
            });
        });

        function myFunction() {
            alert('Hello');
        }
    </script>
</head>
<body>
    <p>
        <button id="start">Start</button>
        <button id="stop">Pause</button>
    </p>
</body>
</html>

This isn't possible. You need to put your timeout in a variable (say `mytimeout` and run `clearTimeout(mytimeout)` to stop it. — evolutionxbox, Sep 07 '16 at 09:13
I need a pause-function, not a stop-function. Javascript can do that. — Jan de Vries, Sep 07 '16 at 11:05

score 2 · Answer 1 · answered Sep 07 '16 at 09:14

2

To achieve this you need to store a reference to your setTimeout() calls and then call clearTimeout() on them when needed. Try this:

$(document).ready(function() {
    var timers = [];

    $("#start").click(function(){
        timers.push(setTimeout(myFunction, 3000));
        timers.push(setTimeout(myFunction, 6000));
    });

    $("#stop").click(function(){
        timers.forEach(function(timer) {
            clearTimeout(timer);
        });
    });
});

function myFunction() {
    console.log('Hello'); // note: use console.log to debug, especially with async/blocking functions
}

answered Sep 07 '16 at 09:14

Rory McCrossan

331,213
40
305
339

well this actualy stops the function, but I need to pause it. – Jan de Vries Sep 07 '16 at 11:03
Hello evolutiobox, can you help by saying what CAN be done? – Jan de Vries Sep 07 '16 at 11:47
If you want to pause/resume then read this: http://stackoverflow.com/questions/3969475/javascript-pause-settimeout – Rory McCrossan Sep 07 '16 at 12:03
It's based upon calculation of a function which is in itself a timingfunction, so that isn't usefull for alerts. – Jan de Vries Sep 07 '16 at 13:07
I have no idea what your comment means, but that is the only possible way of making pause/resume functionality work with the timers available in JS – Rory McCrossan Sep 07 '16 at 13:07

score -1 · Answer 2 · answered Sep 07 '16 at 09:30

-1

The best way to do this is to check with cookies.

This is how I would do this:

1. Before starting alert check if there is a cookie named for example "some_cookie" and it's value;
2. When you click on "pause" it stores value "1" in to "some_cookie";
3. If value is "0" than run;

Easy. just busy to write you code. If you need it, just tell me. I'll write.

answered Sep 07 '16 at 09:30

Vladan Grubo Paunovic

86
1
1
9

thanks, but this means that if user doesn't enable cookies, it won't work? – Jan de Vries Sep 07 '16 at 11:26
1

Why use a cookie when a variable will do? – evolutionxbox Sep 07 '16 at 11:29
1

@evolutionxbox you are right. Variable can do the same job. Just I was in to cookies yesterday. :) – Vladan Grubo Paunovic Sep 08 '16 at 06:44
@JandeVries - instead of cookies you can use a variable as evolutionxbox said. – Vladan Grubo Paunovic Sep 08 '16 at 06:45

pause timeoutfunction with jQuery stop()

2 Answers2