setTimeout does not work
Solution 1
Instead of
// #1
setTimeout(visualize(file), 2000);
you want
// #2
setTimeout(function() {
visualize(file);
}, 2000);
or on modern browsers, you can provide arguments to pass to the function after the delay:
// #3
setTimeout(visualize, 2000, file);
Those three explained:
- (As SLaks mentions) This calls
visualize
immediately, and then passes its return value intosetTimeout
(and sincevisualize
calls itself, it keeps calling itself recursively and you end up with a stack overflow error). - This passes a function reference into
setTimeout
that, when called, will callvisualize
and pass it thefile
argument (with its value as it is then). The function we're passing intosetTimeout
will have access to thefile
argument, even though your code has run and returned, because that function is a closure over the context in which it was created, which includesfile
. More: Closures are not complicated Note that thefile
variable's value is read as of when the timer fires, not when you set it up. - This passes the
visualize
function reference intosetTimeout
(note we don't have()
or(file)
after it) and also passesfile
intosetTimeout
, using its value as of when you set up the call. Later, in modern environments,setTimeout
will pass that on to the function when calling it later.
There's an important difference between #2 and #3: With #2, if file
is changed between when setTimeout
is called and the timer expires, visualize
will see file
's new value. With #3, though, it won't. Both have their uses. Here's an example of that difference:
let file = 1;
// #2, using "file" when the timer fires, not when you set it up
setTimeout(function() { visualize(file); }, 2000); // Shows 2
// #3, using "file" right away when setting up the timer
setTimeout(visualize, 2000, file); // Shows 1
file = 2;
function visualize(value) {
console.log(value);
}
If you needed #3's behavior of immediately reading file
(rather than waiting until the timer fires) in an environment that didn't support extra arguments to setTimeout
, you could do this:
// #4 (for environments that don't support #3)
setTimeout(visualize.bind(null, file), 2000);
Solution 2
setTimeout(visualize(file), 2000)
calls visualize
immediately and passes its result to setTimeout
, just like any other function call.
Solution 3
Try this:
function visualize (file) {
if (!file)
{setTimeout(function(){visualize(file);}, 2000)}
else
{jQuery(function($){visFeaturePool.init(file)})}}
This way you are giving setTimeout an anonymous function that will be executed when scheduled, and you can pass parameters to visualize using a closure like file
.
JasperTack
Updated on July 10, 2020Comments
-
JasperTack almost 4 years
I want to load an OWL file before executing other (visualisation-)scripts. To do this I tried everything from
$(document).ready
to
function visualize (file) { if (!file) {setTimeout(visualize(file), 2000)} else {jQuery(function($){visFeaturePool.init(file)})}}
I think it has to be possible with the setTimeout but that isn't working. I throws the error: Uncaught RangeError: Maximum call stack size exceeded, so it doesn't wait, it just recalls the visualize function untill the stack is full.
Does anybody know what I am doing wrong? Thanks!
-
Mostafa almost 4 yearsMany thanks for the help, for some reason everyone insists to use setTimeout(function(file), milliseconds); which doesn't work at all, this saved my day.