When using setTimeout, you have to put the code you want to execute into a string:
setTimeout('alert("foobar!");', 1000);
However, I want to execute a function to which I have a reference in a variable. I want to be able to do this:
var myGreatFunction = function() { alert("foobar!"); };
// ...
setTimeout('myGreatFunction();', 1000);
(Though in real life, the alert is a lengthier bit of code and myGreatFunction gets passed around as a parameter to other functions, within which the setTimeout is called.)
Of course, when the timeout triggers, myGreatFunction isn't a recognised function so it doesn't execute.
I wish javascript let me do this, but it doesn't:
setTimeout(function() { myGreatFunction(); }, 1000);
Is there a nice way round this?
If you don't need to call myGreatFunction with any arguments, you should be able to pass setTimeout a function reference:
setTimeout(myGreatFunction, 1000);
Also, you should always avoid passing setTimeout code that it needs to evaluate (which is what happens when you wrap the code in quotes). Instead, wrap the code in an anonymous function:
setTimeout(function() {
// Code here...
}, 1000);
See the setTimeout page at the Mozilla Development Centre for more information.
Steve
Who said that it doesn't let you do it?
It does, the code -
setTimeout(function() { myFunction(); }, 1000);
is perfectly valid.
Related
I dont know why my code dont work. Please help!
$('nav').mouseout(setTimeout(function() {
$(this).removeClass('subm')
}, 1000));
Without setTimeout is work normaly.
setTimeout(...) is being called immediately. It returns the id number of the newly pending timeout. The timeout is only registered and called once here. The execution of your code is happening like this:
setTimeout(function() {
$(this).removeClass('subm')
}, 1000);
// = 2
$('nav').mouseout(2);
You need to pass .mouseout() a function that calls setTimeout each time. You also need to fix the this reference, which is different inside the setTimeout callback. This should fix both issues:
$('nav').mouseout(function() {
var self = this;
setTimeout(function() {
$(self).removeClass('subm')
}, 1000);
});
In javascript, like in most other languages, when you do this:
variable = some_function();
you're passing the return value of a function to a variable. Similarly when you do this:
a_function(another_function());
you're passing the return value of another function as an argument to a function.
This works the same in javascript, C, PHP, Ruby and even Fortran.
So, when you do this:
$('nav').mouseout(setTimeout(..));
You're passing the return value of setTimeout as an argument to mouseout. And setTimeout returns a number which can be used in clearTimeout. So you're basically doing this:
$('nav').mouseout(a_number);
What you want instead is to pass a function:
$('nav').mouseout(function(){setTimeout(..)});
Or if you find that hard to read then do this:
function handleMouseOut () {
setTimeout(...);
}
$('nav').mouseout(handleMouseOut); // note we're passing a function here
// not calling it
I understand that Javascript does not have a delay(500) method, which would delay execution for 500 milliseconds, so I have been trying to get around that by using setTimeout and setInterval.
for(var i =0; i< 10; i++){
/* Animation Code */
var doNothing = function(){var m =5;}
setTimeout(doNothing, 50);
}
However, this does not seem to work. I essentially want some code that stops the execution for n milliseconds and then continues execution.
Practically speaking, you can't do this. Deal with it and find a callback-based way instead. Typically this means putting everything that should happen after the delay in the callback itself.
For example, you can't do this to make baz wait:
foo();
setTimeout(function() {
bar();
}, 500);
baz();
so you do the only thing you can:
foo();
setTimeout(function() {
bar();
baz();
}, 500);
The setInterval() Method wait a specified number of milliseconds, and then execute a specified function, and it will continue to execute the function, once at every given time-interval.
Syntax
window.setInterval("javascript function",milliseconds);
The window.setInterval() method can be written without the window prefix.
The first parameter of setInterval() should be a function.
How to Stop the Execution?
The clearInterval() method is used to stop further executions of the function specified in the setInterval() method.
Syntax
window.clearInterval(intervalVariable)
The window.clearInterval() method can be written without the window prefix.
To be able to use the clearInterval() method, you must use a global variable when creating the interval method:
myVar=setInterval("javascript function",milliseconds);
Then you will be able to stop the execution by calling the clearInterval() method.
good refrence
If you came from the language/framework/API background, where you could suspend the execution with something like Sleep, or process user input synchronously with something like DoEvents, it won't work in JavaScript.
There is no way you can block the JavaScript event loop with something like this, for a good reason: UI responsiveness. In JavaScript, everything is asynchronous. You can use setTimeout to do something upon a timer event, but the user is still able to access the UI between the timer events or even navigate away from the page.
To address your code fragment, what you are looking for is called an asynchronous state machine. It allows to preserve the state of the code between stop/continue (in your case, it's the state of the animation, although i variable is also a part of it):
(function()
{
var i = 0;
var nextStep = function()
{
if (i<10)
{
/* Animation Code */
i++;
setTimeout(nextStep, 500);
}
}
nextStep();
})();
It will be much easier to code when all browsers support the new yield keyword:
http://pag.forbeslindesay.co.uk
On a side note, some other answers suggest using setInterval. There is a subtle but important difference between delay and interval. Delay is the time between two steps. Interval is the time since the previous step started. If each step of animation takes 200ms, and you use the interval of 500ms, the actual delay between two steps will be 300ms, not 500ms as probably expected.
setInterval() - executes a function, over and over again, at specified time intervals
To pass a function as a string, be sure to append the function name with parentheses.
window.setInterval("someFunction()", 5000);
When passing a function pointer, do not include the parentheses.
window.setInterval(someFunction, 5000);
var timer_id=setInterval(doNothing,500);
If you want to stop the execution
make the timer_id variable global
clearInterval(timer_id);
Much cleaner and readable code would be if you use RxJS
Here is an example:
Rx.Observable
.interval(1000)
.take(10)
.subscribe((x) => console.log(`${x}: ${new Date().toLocaleTimeString()}`))
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.lite.min.js"></script>
interval - is a time delay between your animation calls. In my example
it's 1000ms
take - number of times to execute subscribe - is function
that will be called every 1000ms for 10 times (in your case it will be
your animation code)
Here some something that could help.
function delay( s , callback )
{
var fct_ref = "tmp_" + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 6).toUpperCase();
var tmp_fct = ( callback !== undefined ) ? callback.toString().match(/^[^{]+\{(.*?)\}$/)[1] : "";
document.getElementsByTagName("body")[0].insertAdjacentHTML("beforeend","<div id='"+fct_ref+"' style='background-color:transparent;color:transparent;position:absolute;top:"+window.scrollY+"px;left:"+window.scrollX+"px;opacity:1;transition:all "+s+"s'>-</div>");
var func = new Function("return function transition"+fct_ref+"(e){ e.target.removeEventListener('transitionend' , transition"+fct_ref+", false ); "+tmp_fct+" ; document.getElementById('"+fct_ref+"').parentNode.removeChild(document.getElementById('"+fct_ref+"')); };")();
document.getElementById(""+fct_ref).addEventListener("transitionend", func , false );
document.getElementById(""+fct_ref).offsetHeight;
document.getElementById(""+fct_ref).style.opacity="0";
}
delay(1, function() { console.log("ANIMATION_1"); } );
delay(3, function() { console.log("ANIMATION_3"); } );
delay(5, function() { console.log("ANIMATION_5"); } );
I have a function in javascript:
function test(){
...
if (){
setTimeout(test(), 1000);
}
}
according to the manual, i can call this with:
setTimeout(test(), 1000);
in fact, it calls, but do not wait the 1s. so I try to use it like the following and it works.
setTimeout(function(){test();}, 1000);
Anyone can explain this to me?
Which manual? Calling test() would call things returned by test() and pass it to setTimeout, so unless your test() is returning a function, this won't work.
You could use the anon function alternative, or you can pass it like setTimeout(test, 1000) without the ().
Another bad usage you might find along the way is to pass it as string like:
setTimeout("test()", 1000)
avoid this at all cost, as this is equivalent to calling eval and you'll run into scoping issue sooner or later.
You should be calling with
setTimeout(test, 1000);
and NOT with
setTimeout(test(), 1000);
In other words, the function you want to call after 1000 ms is test, not the result of calling test!
The reason why
setTimeout(function(){test();}, 1000);
works is that the function you call after 1000ms is a function that calls test, which is basically test itself. For lambda calculus geeks, that's called eta-reduction.
setTimeout expects a function reference. When you pass it this:
setTimeout(test(), 1000);
That is passing the result of calling the test function to setTimeout. Instead, pass it the reference to test itself:
setTimeout(test, 1000);
Want to see something fancy?
function test () {
var what_are_you = 'a closure';
return function () {
alert('I am '+what_are_you+'!')
}
}
setTimeout(test(), 1000);
Here, I am returning a function reference from a function call. See the article below for more info on that!
Documentation
setTimeout on MDN - https://developer.mozilla.org/en/DOM/window.setTimeout
Article about functions, function references - http://jszen.blogspot.com/2008/07/function-reference-vs-function-call.html
I want to call function with arguement periodically.
I tried setTimeout("fnName()",timeinseconds); and it is working.
But when I add an arguement it won't work. eg: setTimeout("fnName('arg')",timeinseconds);
You can add an anonymous function:
setTimeout(function() { fnName("Arg"); }, 1000);
Use an anonymous function, like this:
setTimeout(function() { fnName('arg'); }, time);
In general, never pass a string to setTimeout() or setInterval() if you can avoid it, there are other side-effects besides being bad practice...e.g. the scope you're in when it runs.
Just as a side-note, if you didn't need an argument, it's just:
setTimeout(fnName, time);
setTimeout accepts an expression or a function name or an anonymous function but NO () operator.
() will start executing the function immediately and results in setTimeout accept an invalid parameter.
my problem is that I can not stop a timer.
I had this method to set a timeout from this forum.
It supposed to store the identifyer in the global variable.
By accident, I found out that it is still running after I hide "mydiv".
I also need to know now, if the recursive function creates multiple instances or just one for the timeouts. Because first I thought that it overwrites "var mytimer" everytime.
Now I am not so sure.
What would be a solid way to stop the timer??
var updatetimer= function () {
//do stuff
setTimeout(function (){updatetimer();}, 10000);
}//end function
//this should start and stop the timer
$("#mybutton").click(function(e) {
e.preventDefault();
if($('#mydiv').is(':visible')){
$('#mydiv').fadeOut('normal');
clearTimeout(updatetimer);
}else{
$('#mydiv').fadeIn('normal');
updatetimer();
}
});
thanks, Richard
I think that most people are getting at the reason why this isn't working, but I thought I would provide you with updated code. It is pretty much the same as yours, except that it assigns the timeout to a variable so that it can be cleared.
Also, the anonymous function in a setTimeout is great, if you want to run logic inline, change the value of 'this' inside the function, or pass parameters into a function. If you just want to call a function, it is sufficient to pass the name of the function as the first parameter.
var timer = null;
var updatetimer = function () {
//do stuff
// By the way, can just pass in the function name instead of an anonymous
// function unless if you want to pass parameters or change the value of 'this'
timer = setTimeout(updatetimer, 10000);
};
//this should start and stop the timer
$("#mybutton").click(function(e) {
e.preventDefault();
if($('#mydiv').is(':visible')){
$('#mydiv').fadeOut('normal');
clearTimeout(timer); // Since the timeout is assigned to a variable, we can successfully clear it now
} else{
$('#mydiv').fadeIn('normal');
updatetimer();
}
});
I think you misunderstand 'setTimeout' and 'clearTimeout'.
If you want to set a timer that you want to cancel later, do something like:
foo = setTimeout(function, time);
then call
clearTimeout(foo);
if you want to cancel that timer.
Hope this helps!
As written mytimer is a function which never has the value of a timeout identifier, therefore your clearTimeout statement will achieve nothing.
I don't see any recursion here at all, but you need to store the value setTimeout returns you, and if you need to pair this with multiple potential events you need to store it against a key value you can lookup - something like an element id perhaps?
This is a simple pseudocode for controlling and conditioning recursive setTimeout functions.
const myVar = setTimeout(function myIdentifier() {
// some code
if (condition) {
clearTimeout(myIdentifier)
} else {
setTimeout(myIdentifier, delay); //delay is a value in ms.
}
}, delay);
You can not stop all the functions that are created, intead of that convert the function to setInterval (represent the same logic that your recursive function) and stop it:
// recursive
var timer= function () {
// do stuff
setTimeout(function (){timer();}, 10000);
}
The same logic using setInterval:
// same logic executing stuff in 10 seconds loop
var timer = setInterval(function(){// do stuff}, 10000)
Stop it:
clearInterval(timer);
As noted above, the main reason why this code isn't working is that you're passingt he wrong thing into the clearTimeout call - you need to store the return value of the setTimeout call you make in updateFunction and pass this into clearTimeout, instead of the function reference itself.
As a second suggestion for improvement - whenever you have what you call a recursive timeout function, you would be better off using the setInterval method, which runs a function at regular intervals until cancelled. This will achieve the same thing you're trying to do with your updateFunction method, but it's cleaner as you only need to include the "do stuff" logic in the deferred function, and it's probably more performant as you won't be creating nested closures. Plus it's The Right way to do it which has got to count for something, right? :-)
(function(){
$('#my_div').css('background-color', 'red');
$('#my_div').hover(function(){
var id=setTimeout(function() {
$('#my_div').css('background-color', 'green');
}, 2000);
var id=setTimeout(function() {
$('#my_div').css('background-color', 'blue');
}, 4000);
var id=setTimeout(function() {
$('#my_div').css('background-color', 'pink');
}, 6000);
})
$("#my_div").click(function(){
clearTimeout(id);
})
})();