It might be a beginner question but I'm facing with the next situation:
$(function f() {
function test2() {
//.....
}
function GetData() {
//.....
}
function update() {
test2();
GetData();
//...
}//end update
update();
});//end f()
function stop() {
clearInterval(multipleCalls);
}
function start() {
multipleCalls=null; //this is a global variable
setTimeout(update, 1000);
}
The stop function stops a graphic when a button is pressed and everything works fine. The start function should restart a graphic when a button is pressed. My guess is that the update function is not well invoked in start function. How could I do so everything to work fine?
You have currently commented out the } that closes the update function, so the line that says end f doesn't in fact end f(). In its present state, your code would not execute. (I note that someone else edited your code after which this remark is no longer valid; I don't know if the edit is closer to your actual code, or if it did in fact obscure a real error)
You're referring to both multiplecalls and multipleCalls. Note that javascript is case sensitive.
You're clearing multipleCalls but never setting it to anything but null. Did you intend to write multipleCalls = setTimeout(update, 1000) ?
start, being placed outside of f, won't have access to update. Either define update and the functions it is dependent upon outside of f(), or make it globally accessible, i.e.
window.update = function() { ... }
Which you'd then be able to access as setTimeout(window.update, 1000);
You have a scoping issue. The update is only known within the f.
You are trying to call it from outside f in start. The only way to achieve this is to either expose function update to the same scope as where start is, or bring start to the same scope as update.
The first option is easiest (and ugliest):
function update() {
//...
}
// assign it to the global scope (window is the global scope for browsers)
window.update = update;
Now update is available from `starts.
The more appropriate approach would be to define your handlers (which call start and stop within the scope of f, for example
$(function f() {
//.. everything there now
$('.start').on('click', function(e) {
setTimeout(update, 1000);
});
});
Working example
$(function f() {
var timer; // no need to be 'global'
function update() {
$('.result').text(new Date() + ' GetData();');
}
$('.start').on('click', function() {
// always clear a timer before setting it
clearTimeout(timer);
// and always set a timer variable, so it can be cancelled
timer = setTimeout(update, 1000);
});
$('.stop').on('click', function() {
// cancel the timer
clearTimeout(timer);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class=start>start</button>
<button class=stop>stop</button>
<div class=result>..</div>
You could try this:
window.update = function update() {...}
and then:
setTimeout(window.update, 1000);
Related
My draw() function stops executing after calling this.circle(). If I call the draw() method directly, it works perfectly. However, if I use setInterval(this.draw, 1000), it seems to return right when calling this.circle(). circle() is never executed either. Am I misusing setInterval?
function Ball() {
this.start = function() {
return setInterval(this.draw, 1000);
}
this.circle = function() {
console.log('1');
}
this.draw = function() {
console.log('2');
this.circle();
console.log('3');
}
this.circle() is never executed, and console.long('3') (or anything after it) is never reached.
The result is console.long('2') being repeatedly printed every 1 second
When you use setInterval, this will refer to window. window doesn't have a function called draw, so it will throw an error and stop execution. To fix it, you need to bind the value of this.
return setInterval(this.draw.bind(this), 1000);
“this” is no longer what you think it is, and you have lost context to it, it no longer represents Ball like you’d like it to. You can bind your draw function like “this.draw.bind(this)” or you can capture “this” using a line like “const _this = this;” and then only reference “_this” in your functions to make sure you are always accessing the correct one.
Some reading on the closures
https://javascript.info/closure
As stated by #iagowp this will refer to the window when your method is called by setInterval. Instead, you can fix this by using an ES6 arrow function to call this.draw(). This way your this is referring to the Ball object rather than the function which called this.draw().
See working example below:
function Ball() {
this.start = function() {
return setInterval(_ => this.draw(), 1000);
}
this.circle = function() {
console.log('1');
}
this.draw = function() {
console.log('2');
this.circle();
console.log('3');
}
}
let b = new Ball();
b.start();
I'm trying to figure out how I can reset a timer created inside of an immediately invoking function from within the setTimeout closure. Here is my function:
var triggerHeightRecalc = function() {
setTimeout(function() {
if(imagesLoaded()) {
adjustHeight();
} else {
triggerHeightRecalc();
}
}, 100);
}();
In the event that imagesLoaded() returns false, I receive the following error from attempting to call triggerHeightRecalc():
Uncaught TypeError: undefined is not a function
So I'm not sure if the issue is the function is not in the scope, or maybe it just cannot call itself? I've tried passing triggerHeightRecalc as a parameter in the setTimeout closure, but that doesn't seem to work either.
I've also tried this after reading this SO question:
var triggerHeightRecalc = function() {
var that = this;
var callback = function() {
if(imagesLoaded()) {
adjustHeight();
} else {
that.triggerHeightRecalc();
}
};
timeDelay = window.setTimeout(callback, 100);
}();
What am I doing wrong here, or is there a better way? Is this something that should be a setInterval() instead and I clear the interval when images are loaded?
Side Note: I'm calculating the height of a div inside a jQuery plugin, but I need to wait until the images are loaded in order to get the correct height (not sure if that is relevant).
Since you are invoking the function right from the declaration triggerHeightRecalc is getting set to the return of that function call, which is undefined since you in fact do not return anything.
You can do two things
1. Declare then invoke
var triggerHeightRecalc = function() {
setTimeout(function() {
if(imagesLoaded()) {
adjustHeight();
} else {
triggerHeightRecalc();
}
}, 100);
};
triggerHeightRecalc();
2. Wrap the declaration in () and invoke
var triggerHeightRecalc;
(triggerHeightRecalc = function() {
setTimeout(function() {
if(imagesLoaded()) {
adjustHeight();
} else {
triggerHeightRecalc();
}
}, 100);
})();
The second one will create a global variable unless you do the var triggerHeightRecalc; before hand.
Already answered, but I'll put this in.
First of all, if you just want to wait until all images have loaded you can use:
https://github.com/desandro/imagesloaded and then run the above code.
If that's not what you want, and you you just want a function that your setTimeout can run, then you can remove the () at the end of the function.
Here is what's happening in your current code
Your function is missing the opening bracket or similar character !+( (function.
Also your IIFE has no return keyword, and will return undefined to triggerHeightCalc.
If you do want an IIFE then you can either have a private version that is only callable within itself.
(function myModule(){
myModule(); //calls itself
})();
Or a public version that can be called both inside and outside.
var myModule = (function(){
return function myMod(){
myMod();
}
})();
myModule();
Patrick Evans has the right reasons, but there is a neater way to solve it :)
(function triggerHeightRecalc() {
setTimeout(function() {
if(imagesLoaded()) {
adjustHeight();
} else {
triggerHeightRecalc();
}
}, 100);
})();
Here you are give an internal name to the (still) anonymous function. The name is only visible from within the function itself, its not visible in the global scope. Its called a Named function expression.
This js function is part of a global variable. The first time it is called, from another js file, it works. But the second time, from itself, everything null.
Start: function () {
console.log('InactivityAlerts.Start() called ...');
if (this.active) {
if (this.IDLE_TIMEOUT != "") {
window.setInterval(this.CheckIdleTime, 1000);
console.log('started...');
}
else {
window.setTimeout(this.Start, 1000);
//an iframe sets the IDLE_TIMEOUT later, but this should continue to
//run until it is not blank.
}
}
},
When it calls itself again; however, everything is null, including this.active which was set from an Init prior to this. Why? And how can I make sure everything is still set right?
Thanks for any help
It's a this value issue, make sure you are binding the correct this value when passing functions around.
window.setInterval(this.CheckIdleTime.bind(this), 1000);
window.setTimeout(this.Start.bind(this), 1000);
You can also bind these at construction time if you always want them bound to the same instance.
function YourConstructor() {
//assumes that someFunction is defined on YourConstructor.prototype
this.someFunction = this.someFunction.bind(this);
}
Or the same with a well-known instance:
InactivityAlerts = {
Start: function () { /*...*/ }
};
InactivityAlerts.Start = InactivityAlerts.Start.bind(InactivityAlerts);
I have the following code:
function fn($){
return function(){
innerFn = function(){
setTimeout(show, 1000);
};
show = function(){
$.alert("TEST");
}
}
}
But, after one second, when the function show is run, it says $ is undefined. How do I resolve this issue?
how to pass arguments to a function in setTimeout
setTimeout has a built in mechanism for adding params
var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
use it.
If you're going to use this - you should be careful. but that's another question.
There are a number of things at play here. The most important being that your setTimeout never gets called, since innerFn never gets called. This should do the trick.
function fn($){
return function(){
setTimeout(function(){
$.alert("TEST");
}, 1000);
}
}
fn(window)(); //triggers your alert after 1000ms
Your code makes no any sense, because nothing is called:
function fn($){
return function(){
innerFn = function(){
setTimeout(show, 1000);
};
show = function(){
$.alert("TEST");
}
}
}
Let's say I'm calling fn passing window, then a function is returned, that I can executed. But because this function is containing only function declaration - you also forget var so you pollute the global scope, that is bad - nothing is happen.
You'll need at least one function call inside, like:
function fn($){
return function(){
var innerFn = function(){
setTimeout(show, 1000);
};
var show = function(){
$.alert("TEST");
}
innerFn();
}
}
fn(window)();
And that will works. However, it's definitely redundant. You can just have:
function fn($){
return function(){
function show(){
$.alert("TEST");
}
setTimeout(show, 1000);
}
}
To obtain the same result. However, if you're goal is just bound an argument to setTimeout, you can use bind. You could use the 3rd parameter of setTimeout as the documentation says, but it seems not supported in IE for legacy reason.
So, an example with bind will looks like:
function show() {
this.alert('test');
}
setTimeout(show.bind(window), 1000);
Notice also that window is the global object by default, so usually you do not have to do that, just alert is enough. However, I suppose this is not your actual code, but just a mere test, as the alert's string says.
If you prefer having window as first parameter instead, and you're not interested in the context object this, you can do something like:
function show($) {
$.alert('test');
}
setTimeout(show.bind(null, window), 1000);
Lets say we have this code that I don't have access to/ I cannot change.
function f() {
// bad tasks
}
setInterval(f, 10000);
I want to modify function f so I write something like this underneath.
window.f = function(){
// good tasks
}
But the original function f() with bad tasks in it are still running every 10 seconds. Seems like the function passed into setInterval is still pointing to the original function.
How do I stop it?
Your assumption is correct: the interval keeps a reference to the original f.
There is no way to change this without editing the original script. All you can do is clear all intervals on the site and start another interval. See https://stackoverflow.com/a/8860203/27862 for that.
One way:
function f() {
//bad tasks
}
setInterval(function() { f(); }, 10000);
window.f = function() {
//good tasks
}
so that timer will call not the old f() passed to it but rather a function named f at the moment.
Other way:
function f() {
//bad tasks
}
var interval = setInterval(f, 10000);
function g() {
//good tasks
}
clearInterval(interval);
setInterval(g, 10000);
Don't use setInterval, use setTimeout instead. It will give you the control you need.
function f() {
// bad tasks
fTimeout = setTimeout(f,1000);
}
//start
var fTimeout = setTimeout(f,1000);
now if something bad is going on and you want to rewrite f:
clearTimeout(fTimeout);
window.f = function() {
/* good stuff */
fTimeout = setTimeout(f,1000);
}
fTimeout = setTimeout(f,1000);
See also