Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Location
    under the sea
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Simple Slide Show: setInterval() problem

    I realize this is an overly simple question, but I'm rather horrible at javascript. What I'm doing is changing an img src and having it loop through images. I want it to only start looping when I click and than stop if I click again.


    It loops through when I click once, but when I click again it starts changing its rate of image switching. Starts off switching at 1000 milliseconds than upon clicking again it switches through two images quickly and than slows again.

    Code:
    var myImage = document.getElementById("mainImage");
    
    var imageArray=["1.jpg","2.jpg","3.jpg","4.jpg" ];
    
    var imageIndex=0;
    What I assume is the trouble causing function:

    Code:
    function changeImage(){
    	myImage.setAttribute("src", imageArray[imageIndex]);
    	imageIndex++;
    	if(imageIndex >= imageArray.length) {
    		imageIndex=0;
    	}
    }
    How the trouble function is being called:
    Code:
    var imgSwtch=0;
    
    myImage.onclick= function(){
    		if(imgSwtch==0){
    			var intervalHandle = setInterval(changeImage,1000);
    			imgSwtch=1;
    			console.log("start");
    		}
    		else{
    			clearInterval(intervalHandle);
    			imgSwtch=0;
    			console.log("stop");
    		}
    		
    };

  • #2
    Regular Coder
    Join Date
    Sep 2010
    Location
    Far far away
    Posts
    122
    Thanks
    0
    Thanked 16 Times in 16 Posts
    intervalHandle variable is local, defined within onclick function only. Out of this fucntion it is not defined. Make this global.

  • Users who have thanked siberia-man for this post:

    n00bosaurus rex (07-24-2011)

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Location
    under the sea
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks a lot! Works perfectly now.

    Am wondering though, I've been reading articles on scope to refresh my memory, but I'm not sure I understand why the variable should be global in this case. Does the else statement just not recognize the intervalHandle variable? Was thinking it is inside the function so shouldn't it still be able to clear that? Missing something obvious I think.

  • #4
    Regular Coder
    Join Date
    Sep 2010
    Location
    Far far away
    Posts
    122
    Thanks
    0
    Thanked 16 Times in 16 Posts
    Each time when a function begins to execute local variables are created and local variables are destroyed when a function finishes. This is your issue. To keep some state of a function between two or more calls keep it in a global variable. This is usual way.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •