Jump to content

Slow Settimeout In Ie?


Dave96
 Share

Recommended Posts

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;}

Edited by Dave96
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...