SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Set time limit for a function

    I use a function that moves a background image and i want to stop this moving after a time.
    I tried to use setTimeout() and clearTimeout() methods to start and stop the function, but it doesn't stop the movement.
    What is the problem?

    Code:
    <script type="text/javascript" language="javascript">
     
     
    function MoveBg()
    {
    some code moving background image
    }
     
    $(function() {
     
    var i = setTimeout("MoveBg()" ,200);
    setTimeout(function(){clearTimeout(i)},10000);
     
    });
     
            </script>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    What does the function MoveBg actually do?

    I think first you need to be aware of the differences between setTimeout and setInterval, before you know which one you need.

    I lifted the following from this page:

    The setTimeout function delays for a specified time period and then triggers execution of a specified function. Once the function is triggered the setTimeout has finished. You can of course terminate the execution of the setTimeout before it triggers the function by using the clearTimeoutfunction.

    The setInterval function also delays for a specified time before triggering the execution of a specific function. Where it differs is that after triggering that function the command doesn't complete. Instead it waits for the specified time again and then triggers the function again and continues to repeat this process of triggering the function at the specified intervals until either the web page is unloaded or the clearInterval function is called.
    Here is an example which will output "hello" to the console every 0.5 seconds for five seconds. Maybe you can adapt this to do what you need:

    Code JavaScript:
    function sayHello(){
      console.log("Hello");
    }
     
     
    $(function() {
      var i = setInterval(sayHello ,500);
      setTimeout(function(){clearInterval(i)},5000);
    });

  3. #3
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The setInterval function is not good for my case, because it creates a cycle - background moves and jumps back. I don't need this jumping. I only want a movement of a background for several seconds.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    The code you posted will simply wait 0.2 seconds and then call the MoveBg function.

    The clearTimeout after it will have no effect, as the function will have already fired (9.8 seconds previously).

    Can you post an example of what you are doing?

  5. #5
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see.
    Code:
    <!-- bg moving script -->
    
    <script type="text/javascript" language="javascript">
    
    function MoveBg()
    {
    $('#container').bgscroll({scrollSpeed:50, direction:'d'}); // #container is the div with moving background
    }
    
    $(function() {
    var i = setTimeout("MoveBg()" ,200);
    
    setTimeout(function(){clearTimeout(i)},8000);
    
    });
    **********************************************
    jquery.bgscroll_left_to_right.js

    Code:
    (function() {
    	$.fn.bgscroll = $.fn.bgScroll = function( options ) {
    		
    		if( !this.length ) return this;
    		if( !options ) options = {};
    		if( !window.scrollElements ) window.scrollElements = {};
    		
    		for( var i = 0; i < this.length; i++ ) {
    			
    			var allowedChars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    			var randomId = '';
    			for( var l = 0; l < 5; l++ ) randomId += allowedChars.charAt( Math.floor( Math.random() * allowedChars.length ) );
    			
    				this[ i ].current = 0;
    				this[ i ].scrollSpeed = options.scrollSpeed ? options.scrollSpeed : 70;
    				this[ i ].direction = options.direction ? options.direction : 'h';
    				window.scrollElements[ randomId ] = this[ i ];
    				
    				eval( 'window[randomId]=function(){var axis=0;var e=window.scrollElements.' + randomId + ';e.current -= 1;if (e.direction == "h") axis = e.current + "px 0";else if (e.direction == "v") axis = "0 " + e.current + "px";else if (e.direction == "d") axis = e.current + "px " + e.current + "px";$( e ).css("background-position", axis);}' );
    														 
    				setInterval( 'window.' + randomId + '()', options.scrollSpeed ? options.scrollSpeed : 70 );
    			}
    			
    			return this;
    		}
    })(jQuery);

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    The plugin uses a setInterval which we have to work out how to cancel.
    As it is, the animation is continuous.

    I'm away from the PC right now, but I'll have a look at this later on.

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hello again,

    I had a quick look at the plugin site and I hacked the plugin code a little, so that now, when you kick off an animation, you can pass it an additional parameter of stopAfter, which is a value in milliseconds after which the animation should be cancelled.

    Here's a stand-alone example for you to have a look at:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <title>jQuery Scrolling Background Tutorial</title>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script>
          (function() {
            $.fn.bgscroll = $.fn.bgScroll = function( options ) {
              if( !this.length ) return this;
              if( !options ) options = {};
              if( !window.scrollElements ) window.scrollElements = {};
              
              for( var i = 0; i < this.length; i++ ) {
                var allowedChars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
                var randomId = '';
                for( var l = 0; l < 5; l++ ) randomId += allowedChars.charAt( Math.floor( Math.random() * allowedChars.length ) );
                this[ i ].current = 0;
                this[ i ].scrollSpeed = options.scrollSpeed ? options.scrollSpeed : 70;
                this[ i ].direction = options.direction ? options.direction : 'h';
                //this[ i ].intervalName = options.intervalName;
                window.scrollElements[ randomId ] = this[ i ];
                console.log(randomId);
                
                eval( 'window[randomId]=function(){var axis=0;var e=window.scrollElements.' + randomId + ';e.current -= 1;if (e.direction == "h") axis = e.current + "px 0";else if (e.direction == "v") axis = "0 " + e.current + "px";else if (e.direction == "d") axis = e.current + "px " + e.current + "px";$( e ).css("background-position", axis);}' );
                var interval = setInterval( 'window.' + randomId + '()', options.scrollSpeed ? options.scrollSpeed : 70 );
                if (options.stopAfter){
                  setTimeout(function(){window.clearInterval(interval);}, options.stopAfter);
                }
              }
              return this;
            }
          })(jQuery);
          </script>
          <script type="text/javascript" language="javascript">
          $( function() {
          $('.clouds1').bgscroll({direction:'v', stopAfter:5000 });
          $('.clouds2').bgscroll({scrollSpeed:5 , direction:'h' });
          $('.clouds3').bgscroll({scrollSpeed:10, direction:'d'});
          });
        </script>
        <style type="text/css">
          body{background:#fff}
          .clouds1,.clouds2,.clouds3{background:#3e83c8 url(http://www.queness.com/resources/htm.../bg_clouds.png) repeat 0 bottom;width:300px;height:300px;float:left;border:2px solid #ccc;margin:10px;}
        </style>
      </head>
      <body>
        <div class="clouds1"></div>
        <div class="clouds2"></div>
        <div class="clouds3"></div>
      </body>
    </html>
    Any questions, just let me know.


Bookmarks

Posting Permissions

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