setInterval JS Error

[bouncybee]

Hiya

I'm currently developing a script for a page of products on my site. When you load the products page the script is just meant to scroll naturally through the product images that are listed on that page. If a use hovers their mouse over a link for a product then the image scrolling should stop and show the relevant picture. This should stay on that image permanently until the user rolls off the link and then the auto scrolling should start again. The script works reasonably well so far:

<script type="text/javascript" src="includes/prototype.js" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        var iIntervalID = null;
        myimages = new Array();
        var list = new Array();
        var image = '', c = 0;
 
        function preloadimages()
        {
            for (var i=0; i<preloadimages.arguments.length; i++)
            {
                myimages[i]=new Image()
                myimages[i].src=preloadimages.arguments[i]
            }
        }
        preloadimages("images/dat_categories_image-1.jpg","images/dat_categories_image-10.jpg","images/dat_categories_image-4.jpg","images/dat_categories_image-9.jpg","images/dat_categories_image-5.jpg","images/dat_categories_image-11.jpg","images/dat_categories_image-15.jpg","images/dat_categories_image-12.jpg","images/dat_categories_image-13.jpg","images/dat_categories_image-14.jpg","images/dat_categories_image-16.jpg","images/dat_categories_image-6.jpg");
 
        function setimage(event, image)
        {
            if (document.getElementById('targetimage'))
            {
                document.getElementById('targetimage').src=image.getAttribute('src')
            }
        }
 
        function timedCount()
        {
            setimage('', myimages[c])
            c=c+1;
            if(c>11)
            {
                c=0;
            }
        }
 
        function startCount()
        {
            iIntervalID = setInterval("timedCount()",2500);
        }
 
        function stopCount()
        {
            clearInterval(iIntervalID);
        }
 
        function attachEvents()
        {
            var list = Element.extend(document.getElementsByClassName('pictrigger'));
 
            for (var a=0; a<list.length; a++)
            {
                list[a].observe('mouseover', setimage.bindAsEventListener(this,    myimages[a]));
                list[a].observe('mouseover', stopCount.bindAsEventListener());
                list[a].observe('mouseout', startCount.bindAsEventListener());
            }
        }
 
        window.onload = function() {
            attachEvents();
            startCount();
        }
 
</script>

The problem is that if you try to hover your mouse on the link before the page has finished loading I get an error saying "iIntervalID is undefined" as the setInterval has not returned a value to us yet.

This means that when the user hovers their mouse over the link the image will automatically flick on after a set amount of time rather than holding till the mouse is off the link.

Can anybody help me as i'm really stuck with where to go with this now,

Thanks

[Logic Ali]

The problem is that if you try to hover your mouse on the link before the page has finished loading I get an error saying "iIntervalID is undefined" as the setInterval has not returned a value to us yet.

This means that when the user hovers their mouse over the link the image will automatically flick on after a set amount of time rather than holding till the mouse is off the link.

You can remove the error like this

function stopCount()
{
  if(iIntervalID)
     clearInterval(iIntervalID);
}

but it will not halt scanning if you mouseover before the script runs.
Maybe the simplest fix for what you have in place, is never to cancel the interval. Instead the mouseover/out handlers should simply set/reset a flag that determines whether or not timedCount does anything.
Alternatively, check out PopSlide.

[bouncybee]

Hiya

Yeah I did have an if statement to check that but it still gave the error as you described. I've changed the functionality so that the timed count has a flag check and if its set as false the function effectively doesn't do anything!

It works a treat with no errors so many thanks for your help, i'd been staring at it for so long I was running out of ideas!

<script type="text/javascript" src="http://www.walkerfire.com/includes/prototype.js" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		var iIntervalID = null;
		myimages = new Array();
		var list = new Array();
		var image = '', c = 0, flag = true;
 
		function preloadimages()
		{
			for (var i=0; i<preloadimages.arguments.length; i++)
			{
				myimages[i]=new Image()
				myimages[i].src=preloadimages.arguments[i]
			}
		}
		preloadimages("images/dat_categories_image-1.jpg","images/dat_categories_image-10.jpg","images/dat_categories_image-4.jpg","images/dat_categories_image-9.jpg","images/dat_categories_image-5.jpg","images/dat_categories_image-11.jpg","images/dat_categories_image-15.jpg","images/dat_categories_image-12.jpg","images/dat_categories_image-13.jpg","images/dat_categories_image-14.jpg","images/dat_categories_image-16.jpg","images/dat_categories_image-6.jpg");
 
		function setimage(event, image)
		{
			if (document.getElementById('targetimage'))
			{
				document.getElementById('targetimage').src=image.getAttribute('src')
			}
		}
 
		function timedCount()
		{
			if(flag == true)
			{
				setimage('', myimages[c])
				c=c+1;
				if(c>11)
				{
					c=0;
				}
			}
		}
 
		function setFlagTrue()
		{
			flag = true;
		}
 
		function setFlagFalse()
		{
			flag = false;
		}
 
		function attachEvents()
		{
			var list = Element.extend(document.getElementsByClassName('pictrigger'));
 
			for (var a=0; a<list.length; a++)
			{
				list[a].observe('mouseover', setimage.bindAsEventListener(this,	myimages[a]));
				list[a].observe('mouseover', setFlagFalse.bindAsEventListener());
				list[a].observe('mouseout', setFlagTrue.bindAsEventListener());
			}
		}
 
		window.onload = function() {
			iIntervalID = setInterval("timedCount()",2500);
			attachEvents();
		}
 
	</script>