SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
Thread: setInterval JS Error
-
Jul 20, 2007, 08:43 #1
- Join Date
- Apr 2007
- Posts
- 22
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
setInterval JS Error
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:
Code JavaScript:<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
-
Jul 20, 2007, 10:46 #2
- Join Date
- Sep 2006
- Posts
- 731
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You can remove the error like this
Code:function stopCount() { if(iIntervalID) clearInterval(iIntervalID); }
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.Tab-indentation is a crime against humanity.
-
Jul 23, 2007, 01:08 #3
- Join Date
- Apr 2007
- Posts
- 22
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thats Great!
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!
Code JavaScript:<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>
Bookmarks