...

View Full Version : Adding a settimeout to this function



DanHardy
03-12-2012, 01:43 PM
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:



$(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

c1lonewolf
03-12-2012, 08:41 PM
You could try:

slidesLoaded: setTimeout('function() {

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

and see what happens...

DanHardy
03-12-2012, 09:54 PM
Thanks for the reply but I don't think you understood the question

blaze4218
03-13-2012, 04:32 PM
I think this might be what you are looking for

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);

DanHardy
03-13-2012, 06:00 PM
Thanks but this had no effect

blaze4218
03-13-2012, 07:09 PM
your right that last line should have been


setTimeout('$(ForLater)',5000);
But most would recommend against passing a string to setTimeout, so maybe try this instead:


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);

felgall
03-14-2012, 10:07 AM
your right that last line should have been


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:


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.

blaze4218
03-14-2012, 04:36 PM
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
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...


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


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


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

setTimeout(function() {$(ForLater)},5000);
Although, following felgall's logic, you could have fixed your original wrapper: Instead of wrapping your code with


setTimeout(
// Your code
,5000);

you could have just wrapped it with


setTimeout(function(){
// Your code
},5000);

and called it a day...

felgall
03-14-2012, 10:41 PM
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.

blaze4218
03-14-2012, 11:18 PM
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 http://www.codingforums.com/showthread.php?t=254096 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...

DanHardy
03-15-2012, 05:39 PM
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?

DanHardy
03-15-2012, 06:32 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum