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 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stop setInterval

    I have 2 questions about setInterval. I hope someone has the answer especially on my second question, which i spent a lot of time on..

    1. I want setInterval to make tha animation to loop on page load. I'm using <body onLoad="pulseStart()"> which works fine. But as soon as i insert the line $(document).ready(function() {}); , the body onload stops working. I have been told that a JQuery must always start with "document ready", is that wrong?

    2. I'm using "onClick" on a div in body to stop the animation. This works, but for some reason the animation keeps looping for a number of times; the longer i wait after page load, the more times the animation will run before stopping. How can i stop the animation immediatly?

    Here is the code:
    Code:
    HTML
    <div id="potosjap" onClick="pulseStop()" ></div>
    
    JQuery
    var timerId
    
    function pulse() {
       $("#javascript").animate({
    			marginTop: "-=20px",
    			width: '110px', 
    			height: '110px'}, 
          	1000);
       
       $("#javascript").animate({
    			marginTop: "+=20px",
       	 		width: '100px',
        		height: '100px'},
          	1000);
    
    function pulseStart() {  
      if (timerId) return
    
      timerId = setInterval(pulse, 1000)
      pulse()  // <--  start immediately, don't wait 1 sec until setInterval triggers  
    }
    
    function pulseStop() {    
      clearInterval(timerId)
      timerId = null
    }
    Last edited by VIPStephan; 08-29-2012 at 09:44 AM. Reason: fixed code BB tags

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,789
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    OK, you’re mixing a lot of things up here. First of all you need to understand what jQuery is and why and when to use it. Having no idea about the tools you are using doesn’t help you achieve what you intend. The documentation gives a good start.

    Now, when you use jQuery you don’t need any <body onload="…"> crap. If you already include that much overhead code (even in its minfied form jQuery is still 32KB of code) with a lot of prefabricated functionality to ease development why not use it then? Put all your functions into the “document ready” function of jQuery and there you go. And by the way: A shorthand way to write $(document).ready(function() {…}); is to just write $(function() {…});; it does the same.

    Then, you are doing it much more complicated than you need to. You have jQuery, remember? You can and should use the callback functions animate() provides to run functions recursively. Then, jQuery also has the stop() function to stop animations at any time.

    Something like this:
    Code:
    <div id="example"></div>
    <div id="stop">stop it!</div>
    Code:
    #example {
    	width: 100px;
    	height: 100px;
    	border: 1px solid red;
    }
    #stop {
    	width: 50px;
    	background-color: lime;
    	position: absolute;
    	top: 150px;
    }
    PHP Code:
    $(function() {
        var 
    forth = function() {
            $(
    '#example').animate({
                
    'margin-top''+=10px',
                
    'margin-left''+=10px',
                
    width'80px',
                
    height'80px'
            
    },
            {
                
    duration500,
                
    completeback
            
    });
        }
        var 
    back = function() {
            $(
    '#example').animate({
                
    'margin-top''-=10px',
                
    'margin-left''-=10px',
                
    width'100px',
                
    height'100px'
            
    },
            {
                
    duration500,
                
    completeforth
            
    });
        }
        
    forth();
        $(
    '#stop').click(function() {
            $(
    '#example').stop();
        });
    }); 

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    JavaScript statements (other than compound) are terminated with a semi-colon.
    Your code sample(s) appear to have a missing closing bracket for pulse().
    Use jQuery's stop() to stop an animation.

    Code:
    var timerId;
    
    function pulse() {
       $("#javascript").animate({
    			marginTop: "-=20px",
    			width: '110px', 
    			height: '110px'}, 
          	1000);
       
       $("#javascript").animate({
    			marginTop: "+=20px",
       	 		width: '100px',
        		height: '100px'},
          	1000);
    }
    
    function pulseStart() {  
      if (timerId) return;
    
      timerId = setInterval(pulse, 1000);
      pulse();  // <--  start immediately, don't wait 1 sec until setInterval triggers  
    }
    
    function pulseStop() {    
      clearInterval(timerId);
      timerId = null;
      $('#javascript').stop(true, true);
    }
    
    $(document).ready(function() {
        pulseStart();
    });
    // remove onload="" from the body tag
    Edited: Follow VIPStephen's advice - I was just editing your code "as it was".
    Last edited by AndrewGSW; 08-29-2012 at 10:33 AM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

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