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 12 of 12
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Adding a settimeout to this function

    Hi all,

    I have what I hope will be a simple question for someone to help me with.

    I simply want to add a timeout to the folowing code:

    Code:
    $(function(){
    			
    			
    			$('#slides').slides({
    		
    				effect: 'fade',
    				crossfade: true,
    				preload: true,
    				preloadImage: '<?php bloginfo('template_directory'); ?>/img/loading.gif',
    				
    				 
    				play: 4500,
    				
    				pause: 500,
    				hoverPause: false,
    				animationStart: function(current){
    					$('.caption').animate({
    						bottom:-35,
    						
    					},100);
    					if (window.console && console.log) {
    						// example return of current slide number
    						console.log('animationStart on slide: ', current);
    					};
    				},
    				animationComplete: function(current){
    					$('.caption').animate({
    						bottom:0
    					},200);
    					if (window.console && console.log) {
    						// example return of current slide number
    						console.log('animationComplete on slide: ', current);
    					};
    				},
    				slidesLoaded: function() {
    					
    					$('.caption').animate({
    						bottom:0
    					},200);
    				}
    			});
    		});
    As you can see this is a slideshow code. All I want to do is delay the first slide sliding in when the slideshow loads. I have tried wrapping the whole function in a settimeout but to no avail.

    Thanks in advance

    Dan

  • #2
    Regular Coder
    Join Date
    Sep 2002
    Posts
    429
    Thanks
    0
    Thanked 20 Times in 20 Posts
    You could try:

    slidesLoaded: setTimeout('function() {

    $('.caption').animate({
    bottom:0
    },200);' , 10000);
    }

    and see what happens...
    NO Limits!! www.dhcreationstation.com
    ------------------------------------------------------------
    Broken items wanted for tinkerin'! PostItNow@BrokenEquipment.com

  • #3
    New Coder
    Join Date
    Mar 2010
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the reply but I don't think you understood the question

  • #4
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    I think this might be what you are looking for
    Code:
    var ForLater = function(){
    			
    			
    			$('#slides').slides({
    		
    				effect: 'fade',
    				crossfade: true,
    				preload: true,
    				preloadImage: '<?php bloginfo('template_directory'); ?>/img/loading.gif',
    				
    				 
    				play: 4500,
    				
    				pause: 500,
    				hoverPause: false,
    				animationStart: function(current){
    					$('.caption').animate({
    						bottom:-35,
    						
    					},100);
    					if (window.console && console.log) {
    						// example return of current slide number
    						console.log('animationStart on slide: ', current);
    					};
    				},
    				animationComplete: function(current){
    					$('.caption').animate({
    						bottom:0
    					},200);
    					if (window.console && console.log) {
    						// example return of current slide number
    						console.log('animationComplete on slide: ', current);
    					};
    				},
    				slidesLoaded: function() {
    					
    					$('.caption').animate({
    						bottom:0
    					},200);
    				}
    			});
    		}
    
    setTimeout($(ForLater),500);
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • #5
    New Coder
    Join Date
    Mar 2010
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks but this had no effect

  • #6
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    your right that last line should have been

    Code:
    setTimeout('$(ForLater)',5000);
    But most would recommend against passing a string to setTimeout, so maybe try this instead:
    Code:
    var ForLater = function(){
    			
            $(function(){
    			
    			$('#slides').slides({
    		
    				effect: 'fade',
    				crossfade: true,
    				preload: true,
    				preloadImage: '<?php bloginfo('template_directory'); ?>/img/loading.gif',
    				
    				 
    				play: 4500,
    				
    				pause: 500,
    				hoverPause: false,
    				animationStart: function(current){
    					$('.caption').animate({
    						bottom:-35,
    						
    					},100);
    					if (window.console && console.log) {
    						// example return of current slide number
    						console.log('animationStart on slide: ', current);
    					};
    				},
    				animationComplete: function(current){
    					$('.caption').animate({
    						bottom:0
    					},200);
    					if (window.console && console.log) {
    						// example return of current slide number
    						console.log('animationComplete on slide: ', current);
    					};
    				},
    				slidesLoaded: function() {
    					
    					$('.caption').animate({
    						bottom:0
    					},200);
    				}
    			});
    		});
    };
    
    setTimeout(ForLater , 5000);
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,480
    Thanks
    0
    Thanked 635 Times in 625 Posts
    Quote Originally Posted by blaze4218 View Post
    your right that last line should have been

    Code:
    setTimeout('$(ForLater)',5000);
    No it shouldn't - setTimeout needs a function as the first parameter - if you give it a string then it has to try to convert that to a function. That code should read:

    Code:
    setTimeout(function() {$(ForLater)},5000);
    that way you are giving the call the function it expects rather than it having to eval() the string in order to convert it to what you should have written.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    Boy, you sure do love to argue semantics...

    I will accept your premise as a further elaboration of my statement not to pass a string as the first argument in setTimeout, because that was all I was trying to say without getting into the why. But as to what it should have been? That was a declaration of my flawed thought process, and what I was considering would have only been correct written as such. I'll thank you not to tell me what I thought I was writing

    What you have done is correct the flaw, but I had already done so with my second example, which left the setTimeout expression cleaner as
    Code:
    setTimeout(ForLater , 5000);
    But what we have both failed to address in our explanations is where the OP likely went wrong in the first place...

    Quote Originally Posted by felgall View Post
    setTimeout needs a function as the first parameter
    I think most people get this. However, if they are like me, they think early on in their study of JS that they should evaluate a function as the first argument.
    @DanHardy you already tried to wrap the original code in a setTimeout, and what that accomplishes is JS will immediately execute the expression given, and pass its return value to setTimeout. That is why your code executed, but when it returned a value that was not a function, it failed "Invalid Argument"...
    Consider the following
    Code:
      function $(s) {
        s();  // this will execute a function object passed as it's sole parameter, but it will return an implied true, which is *not* a function
      }
    
      var later = function () {
        alert();
      }
    
      setTimeout($(later) , 500); // this will evaluate the $ function and pass its return value to setTimeout as the first argument. So we are going into the $ function, which tells us to evaluate the later function, which fires immediately (remember, we haven't returned to the setTimeout, so nobody knows they are *supposed* to wait...)
    as opposed to
    Code:
      function $() {
        return later;  // Here we are returning a function Object, this return value will be used as the first argument of setTimeout and all is hunky dory
      }
    
      var later = function () {
        alert();
      };
    
      setTimeout($() , 500),  // this will also evaluate the $ function and pass its return value to setTimeout as the first argument
    The important thing to remember is:
    1) setTimeout expects code that will evaluate to a function object myFunct, not an expression myFunct()
    2) setTimeout will coerce a string into a function by wrapping a string with eval(), don't do that. Aside from not being properly optimized, it is a security risk, and code reuse is hindered by using eval() on a string.

    Now as far as clean coding practices go... I would really recommend you build your function object and pass that as the argument rather than try to force an anonymous function into an arguments list. Especially since you pretty much had to create the function ForLater anyway. Seems like we went through all that trouble just to muck it up with
    Code:
    setTimeout(function() {$(ForLater)},5000);
    Although, following felgall's logic, you could have fixed your original wrapper: Instead of wrapping your code with
    Code:
    setTimeout(
        // Your code
    ,5000);
    you could have just wrapped it with
    Code:
    setTimeout(function(){
        // Your code
    },5000);
    and called it a day...
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • #9
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,480
    Thanks
    0
    Thanked 635 Times in 625 Posts
    Quote Originally Posted by blaze4218 View Post
    2) setTimeout will coerce a string into a function by wrapping a string with eval(), don't do that. Aside from not being properly optimized, it is a security risk, and code reuse is hindered by using eval() on a string.
    Which is exactly why I was suggesting that '$(ForLater)' is inappropriate to use as JavaScript will applyeval('$(ForLater)') in order to coerce that into function() {$(ForLater)} in order for the setTimeout to be able to use it. So you may as well save those two steps by coding it that way to start with - although in this case since the string is completely static you are better off simply defining it as a separate function and passing that instead.

    The other thing to keep in mind is that what you are allowed to do using eval() is significantly restricted in strict JavaScript and so depending on what is in the string it may not work at all if you apply "use strict"; to your code. It wouldn't even be obvious why the code doesn't work in this case because the eval is implied rather than explicitly coded.

    From what I have seen about 100% of those asking questions about code that uses setTimeout or setInterval code the first parameter as a string so it is definitely not true to say that everyone knows that it is supposed to be a pointer to a function. Obviously 100% of those asking such questions don't know that until someone tells them.
    Last edited by felgall; 03-14-2012 at 09:44 PM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #10
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    Quote Originally Posted by felgall View Post
    in this case since the string is completely static you are better off simply defining it as a separate function and passing that instead.
    Which, as I have been trying to tell you, I already did in post #6

    "about %100"? Hmmm, while I puzzle over this statement, and your uncanny statistical analysis; I will admit that by "most" (and I did say most, not "everyone"...) I was taking liberties. But in my defense, I only did so to set up the next line. I think it is something that doesn't get explained well by those of you that are schooled in programming. And that those of us that are self-taught (as are many of your CF students) often need explicitly spelled out: myFunct is an object that can be passed the same as a variable, and myFunct() will execute said function passing the return value as a variable. Just like in this thread Javascript outputting "undefined" in the html just earlier today. I did not intend imply anything about your saying that being unnecessary, but rather I intended that to be the basis for addressing those that already do understand it, without delving into that subject matter as well... You're a teacher aren't you? I seem to recall that technique used by many a teacher in my past...
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • #11
    New Coder
    Join Date
    Mar 2010
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks guys, didn't mean to cause an argument!

    Little off topic but could either of you suggest why this slideshow isn't showing up at all in Internet Explorer 8 and below?

    Is it most likely a conflict?

  • #12
    New Coder
    Join Date
    Mar 2010
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Solved my previous question, the trailing comma in the options was the issue.

    I thought I should let you both know, the timeout methods (both ways) were successful in delaying the slideshow.

    However, that was not my original question. I wanted to load the slideshow on document load, and delay the amount of time before the second slide in the sequence came in.

    (i realize my original attempt at a solution might have been misleading)

    I'm guessing this might be more of a slideshow script specific problem but I think it would be nice if there was some sort of global way of delaying the first slide coming in for most if not all slideshow scripts.


  •  

    Posting Permissions

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