How do I stop function started by setTimeout call

Hello,

We have a page where DIVs are Slided from Left to right by call to a JS function via setTimeout.

As you can see the sample page being worked on here:

https://www.anoox.com/overview_pitch_my_business_test.php

So what we want to happen, is when People click for example on the Stop link or Load Next link the function called by setTimeout is Stopped from further running.

I have the correct calls to Stop this setTimeout based called, as you can see via above page, that is have:

JavaScript

function stop_carousel () {
    clearTimeout(timerId_1);
    
    if (timerId_2 != null)
    {
        clearTimeout(timerId_2);
    }
}

But it is NOT working.
What do I need to change to get this right?

Regards,
Dean @ Anoox.com

as a setTimeout runs only once a clearTimeout only works if it runs before the code from the setTimeout starts to run.

the way to stop running further setTimeouts is to not call them

The reason why it is not working is that you’re declaring timerId_2 again in the carousel function, so the timeOut you’re initialising it to is only accessible within the scope of that function. Change lines 310 - 314 to

if (maxCounter < maxGo)
{
    timerId_2 = setTimeout(carousel, 3000);

}

so that the timeOut is assigned to the variable of the same name in the global scope, which can be accessed by that stop function.

M3g,

I am not quite clear as to what you are suggesting!
I think you meant that both setTimeout ids should have the same value. I did that. And still it is not working still.
BTW, lines 310 and 314 are not even existing in my Editor. FYI, I use Editplus.

Thanks.

I have never come across a situation where clearTimeout is useful. Usually the code runs so soon after the setTimeout that the person doesn’t have time to change their mind and ask to cancel it.

A setTimeout only runs once so presumably you are running lots of them. All you need to do is to NOT call setTimeout after the Stop link has been triggered.

The others can correct me but I think you are starting the timer again without a handle on it so you don’t have anything to stop.

If you add the id here then you can stop it it like so.

... etc...

if (maxCounter < maxGo)
	{
	timerId = setTimeout(carousel, 3000); 

	}
   
}

function stop_carousel () {
	clearTimeout(timerId);
}

Whether this is the right approach or not I will leave to the experts to comment.

Really? debounce is the most typical use case.

It’s the right approach, it’s the same as m3g4p0p suggested above.

I had forgotten about that one.

Hm, I was just referencing ll. 310 - 314 in the page source as shown in my browser. I see that you removed the variable declaration now, but you also removed the variable assignment, which you need to clear the timeout.

BTW, to avoid confusion it would be more helpful if you provided your relevant code (and the changes you’ve made) here rather than just updating your live code without notice.

Hey all,

So got it working OK.
Problem, I think was, that the 1st call to function carousel() was not properly declared as VAR!
You know JavaScript, how it can go crazy if you do not user the var declaration, without giving you an Error message.
So it is working all fine now. You can see it here:
https://www.anoox.com/overview_pitch_my_business_test.php

Thanks

Glad you got it working eventually :slight_smile:

No the actual problem was that you started another timer without an id and that was the one that kept running as explained above. The code I posted in post#6 was from a working example.

You have changed your code to more or less match now anyway.

1 Like

Only if you leave out the ‘use strict’ command. With that command included any variable you forget to declare will generate a syntax error.

Yes, you may be right.
Actually there was another problem, which was due to JS being so different in its Var declaration compared to like Php. That is from this experience I found out that in JS if you declare a Variable outside functions, then all functions will have scope to this variable without it being passed to them! WOW! This is not at all how it is in other programming languages. And in JS not can the functions see the variable declared outside of the functions but they can change it too which change will have global scope too! Now mind you, I actually like this alot, since it makes for easier coding, but it is totally different compared to Php where a variable declared outside of a function, well given value, has NO scope inside functions!

Anyway, really good learning experience.
And hey we did this whole thing without any JQuery :slight_smile:

Ah! Ok. That is good to know. Thanks

Yes - one of the changes made to JavaScript in 2009 was to require all variables to be declared before use - but in order to not break antiquated scripts from 1996 that are still in use you need to add the use statement to tell the browser that you are using a post 2009 version of JavaScript (and in order for antiquated browsers to not crash with a syntax error on the use statement you wrap it in quotes so the antiquated browsers see it as a text string instead of a command)…

That is good Intel.
Thanks.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.