How can I stop a function early?

Question

I have made a timed function that delays for 9 second after the page loads before starting. However, I would like it to be cancelled if a user interacts with the div it is affecting. Here is my code for the function being called.

function buttonchange4(){ $(".button4").css("backgroundColor","yellow").delay(3000).queue(function(next4){ $(".button4").css("backgroundColor","silver"); next4(); }); }; var buttonshow3; $(document).ready(function(){ $(".button4").delay(9200).queue(function(nextoooo){ buttonchange4(); buttonshow3 = setInterval( buttonchange4, 12000); nextoooo(); }); });

And here is my code for stopping the function.

$('.button4').click(function(){ $( ".button4" ).stop(); clearInterval(buttonshow3); $('.button4').css("backgroundColor","yellow"); });

For some reason, after the delay of 3 seconds it still changes the background color of the button to silver... It seems to stop the delay function and jump straight to buttonchange4(); How can I stop this?

I think it's the setInterval the problem ... try to clear the setInterval like here — Ko2r
– Ko2r, Commented Jul 31, 2014 at 20:50
I need it to run every 12 seconds, starting 9 seconds after the page is loaded — user3362196
– user3362196, Commented Jul 31, 2014 at 20:59

doniyor · Accepted Answer · 2014-07-31 21:00:36Z

2

return; breaks and stops the function

if you want to break the TimeInterval you can do it this way:

var i = setInterval(FunctionA, 1000); clearInterval( i );

or you can stop the delay() with dequeue();:

$( ".button4" ).dequeue();

edited Jul 31, 2014 at 21:00

answered Jul 31, 2014 at 20:49

doniyor

38k62 gold badges183 silver badges272 bronze badges

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

3 Comments

user3362196 Over a year ago

I managed to clear the interval using the code above, but it would still run the buttonchange4() function once before ending it.

doniyor Over a year ago

@user3362196 dont you need to dequeue(); instead of stop() ? like $( ".button4" ).dequeue();

user3362196 Over a year ago

Thank you! dequeue worked perfectly. I was using the wrong command to stop the function.

Jaime Gomez · Accepted Answer · 2014-07-31 20:54:11Z

jQuery's delay function doesn't offer a way to cancel it (docs).

So I recommend using setTimeout and clearTimeout, like so:

var timeoutId = setTimeout(function() { // do something }, 9000) function cancel() { clearTimeout(timeoutId) }

Collectives™ on Stack Overflow

How can I stop a function early?

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related