Slow Settimeout In Ie?

[Dave96]

Hi all, I have spent literally days debugging this and can't for the life of me find the reason why.What I basically have is a grid of images that I am scrolling through with manual buttons. Rather than just snapping to a new scroll position I am using setTimeout in a loop to slow it down a bit. This works fine in most browsers except in IE its a lot lot slower.I can't seem so make it go any faster even but changing the frequency of the setTimeout events.Any ideas?

function smoothScroll(scrollContent, noPixels){	var d = document.getElementById(scrollContent);	var startY = d.scrollTop;	var stopY = d.scrollTop + noPixels;		var speed = Math.round(Math.abs(noPixels) / 25);	var step = Math.round(Math.abs(noPixels) / 25);	var leapY = stopY > startY ? startY + step : startY - step;	var timer = 0;	if (stopY > startY)	{		for (var i=startY; i<stopY; i+=step )		{			var scrollElementTo = function(element, pixelsFromTop)			{				return function()				{					element.scrollTop = pixelsFromTop;				}			}(d, leapY)			var t = window.setTimeout(scrollElementTo, timer*speed);			leapY += step;			if (leapY > stopY)				leapY = stopY;			timer++;		}	}	else if  (stopY < startY)	{		for (var i=startY; i>stopY; i-=step )		{			var scrollElementTo = function(element, pixelsFromTop)			{				return function()				{					element.scrollTop = pixelsFromTop;				}			}(d, leapY)			var t = window.setTimeout(scrollElementTo, timer*speed);						leapY -= step;			if (leapY < stopY)				leapY = stopY;			timer++;		}	}//			d = null;	return 0;}

[justsomeguy]

It might be worth it to stick a div like this on your page:<div id="feedback" style="width: 400px; height: 400px; border: 1px solid black; overflow: auto;"></div>And then have some debugging statements write info to that so that you can tell what's going on. You may be able to determine which part is taking longer. One issue may be that you keep redefining a function in a loop (using var no less), IE may not like that.

[Dave96]

Thanks for the pointers, IE and Chrome seem to be reporting the same step and timing values so it must just be slow at running the script.Can you give me any pointers on how to separate the function from the loop? I had tried it outside but it was never getting called. The reason I did it this way was due to the timing and passing 2 variables to it. If it was just a separate function the pixelsFromtop variable would just resolve to the last value calculated and so just jump the element rather than scroll it.Cheers, Dave.

[justsomeguy]

In this case you could probably just do this:var t = window.setTimeout('d.scrollTop=' + leapY, timer*speed);

[Dave96]

Sorry, no luck. I thought the d and leapY had to be part of a closure so that the variables stayed the same when the script was run. Other wise when it is run the page has loaded, the loop has been run its required number of times and d and leapY no longer exist so don't refer to anything.

[justsomeguy]

A closure is one way to do that, but with the above you're just building a string of code, so the code would have whatever value leapY had during that run of the loop.

[Dave96]

Yeh, leapY has the right value but d does not. I get "d undefined" errors in IE and it doesn't work as you have written in any browser.I managed to get rid of the closure using:

var t = window.setTimeout("document.getElementById('"+scrollContent+"').scrollTop="+leapY, timer*speed);

where scrollContent is the string initially passed to the function however it is still slow in IE. I'm not sure where else I can slim it down.