clearInterval issue (jquery, javascript)

I have some problems with a school assignment. Anyway, when I use startInterval, I assign and intervalID so I can later clear the interval. Unfortunately, it does not clear when you press the "stop this madness" button. Anyone know why?

(if you are wondering about all the background color stuff I used a jquery plugin which I didn't add to this snippet)

The delay for setInterval() is specified in milliseconds, and you have specified a delay of 0.1 - which means you've tried to schedule your function to run 10000 times per second. In practice JS doesn't let you go under 5ms: any shorter delay specified will be rounded up, but still that means your function will run approximately 200 times per second.

When you call .animate() multiple times on the same element, as you are doing with .gal, #title, and body, it queues up additional animations that will be run after the current ones finish.

Putting those two points together, and every 5ms your code adds multiple animations to the queue, each of which takes a lot longer than 5ms. So even when you call clearInterval(), you've already got tons of animations still queued up and they will take a long time to complete.

You can stop animations currently underway and clear a given element's animation queue using the .stop() method:

$(".gal").stop(true);

But trying to manage ongoing animations using setInterval() is always going to be a bit clunky, especially where you have multiple animations with different times specified. But fortunately the .animate() method lets you provide a callback function that will run after the animation completes, so you can schedule additional processing from there.

You asked in a comment about whether there's a more efficient way to manage the animations: for all those colour changes I'd suggest using an array, then when the current colour change completes call .animate() again for the next colour in the array.

So maybe something like the following, noting that I've removed some of the code that didn't relate to the animations in order to make this answer a bit shorter, and I've split the animation code into three functions to make it clearer for you what each one is doing: