How to stop a function from running?

Question

I have a function but it keeps on running even if I call a stop(). The function name is function slide() { //codes here }

slide().stop();

How to stop it from running?
And how to run it again after stopping it?
So I will be having a full control on it.

`.slide` is not a known method in either jQuery Core or jQuery UI. Are you using a custom plugin that implements this method or are you perhaps referring to `.slideUp` or `.slideDown`? — mekwall, Jan 31 '11 at 12:49
okay, so how can I stop a function? Because it is still running on background. — Ryan, Jan 31 '11 at 12:52
What are you doing inside the `slide` method ? Normally you cannot stop execution of a function, because execution is sequential.. — Gabriele Petrioli, Jan 31 '11 at 12:54
I'm also interested to see what you are doing in `.slide`, do you mind posting all of the code in a test case on [jsFiddle](http://jsfiddle.net)? — mekwall, Jan 31 '11 at 13:00

score 12 · Accepted Answer · edited May 23 '17 at 11:45

12

.stop is a method for stopping animations that is running asynchronously (in the background) on the current element. It doesn't interrupt/stop any other code that isn't using the effects library.

Instead you should take a look at .queue which lets you setup custom queues that you can clear or dequeue.

There already exist very good answers on how to use .queue so I'll point you to that question instead: Can somebody explain jQuery queue to me? - Look at the answer by gnarf.

edited May 23 '17 at 11:45

Community

1
1

answered Jan 31 '11 at 12:53

mekwall

28,614
6
75
77

What should I do then? if it is not stop()? – Ryan Jan 31 '11 at 12:54

score 8 · Answer 2 · answered Jan 31 '11 at 12:54

8

If it hits a certain condition in your slide function just use a return; statement to exit out of the function. Then to start it again just recall the function slide(). You can't use code from outside of the function to make it exit, it has to be within the function.

answered Jan 31 '11 at 12:54

amurra

15,221
4
70
87

I used something like this, passed in a boolean to the function. If it was false then it hit an if statement that used `return;` else if a true was passed in the function would run like normal. Thanks for the idea. – Daniel Bailey Dec 20 '18 at 11:04

score 2 · Answer 3 · answered Jan 23 '14 at 10:53

Had the same problem and after reading the last answer by amurra this is what I did...

Declared a global variable by attaching it to the 'window' object. This will act as a flag and decide whether to keep calling the 'slide_it()' function or to stop it (return)

window.slide_it = true;

$(element).on({

    mouseenter:
        function() {
            window.slide_it = true;
            slide_it();
        }

    mouseleave:
        function() {
            window.slide_it = false;
        }

});

function slide_it () {

    if( !window.slide_it )
        return false;

    $(element).stop().animate( 
        {
            'left':'-=5px'
        },
        100,
        function() { slide_it() }
    );

}

Once you enter the mouse over the $(element) the slide_it() function will iterate itself. And it will stop only if window.slide_it is set to false. So you just set window.slide_it to false when "mouseleave"s

Hope it helps someone else having the issue!

Robert Koritnik · Answer 4 · 2011-01-31T12:59:50.137

If your function is a long running javascript process you should put some kind of outside hooks in it to stop it's execution process and continue when desired. If you have a while loop in it you should be checking against an outside condition to stop its execution. If you don't have a loop in the regular sense of it you will have to find some other way of checking function's running state conditioning.

It's generally not possible to interrupt a running function in Javascript. Not without any additional code that is.

Long running functions will be interrupted by browsers by asking the user whether they want the script to continue execution or rather stop it (browser assumes execution has hanged as in an infinite loop).

If you do have a long running function in Javascript you should split fnctionality into several parts and use javascript threading technique that delays execution of short functions one after another by means of window.setTimeout(function, delay);

How to stop a function from running?

4 Answers4

Linked