Why is a function being self-invoked within an object literal? - javascript

jQuery (fragmented for simplicity)
The interval property contains an setInterval() function with in the object literal slider, the setInterval() defined in interval is invoking itself, or at-least appears to be, but why?
var slider = {
config : function(imgs, callback){
//mandatory
var images = $(imgs);
//optional
var animationInterval;
var animationTime;
callback(images);
},
target : 0,
get lastElem(){
return this.images.length-1;
},
interval : setInterval(function () {
setSlider();
}, 3000)
};
slider.config('ul.images li', setConfig);
slider.images.hide().first().show();
function setConfig(imgs){
slider.images = imgs;
}
function setSlider(dest) {
slider.target === slider.lastElem ? slider.target = 0 : slider.target++;
slider.images.hide().eq(slider.target).fadeIn(1000);
slider.triggers.removeClass('active').eq(slider.target).addClass('active');
}
JSFiddle

When you make an object literal, the values you type in are evaluated as expressions.
function square(x) {
return x * x;
}
var lookup = {
'two': square(2)
};
console.log(lookup['two']); // 4
Here, you're calling setInterval instead of square. setInterval takes a function and period and schedules that function to run repeatedly. It returns a numeric identifier of the scheduling, so that you can stop it later with clearInterval. For example, you could later do clearInterval(slider.interval); to stop setSlider from being called.

In your current code you are assigning the RESULT of setInterval() to the interval property. What I would suggest is to wrap the setInterval() call in a function, like this:
interval : function() {
setInterval(function() {
setSlider();
}, 3000);
}
Then, you should be able to call slider.interval()

Related

How can I end a requestanimationFrame with a function? [duplicate]

I'm trying to cancel a requestAnimationFrame loop, but I can't do it because each time requestAnimationFrame is called, a new timer ID is returned, but I only have access to the return value of the first call to requestAnimationFrame.
Specifically, my code is like this, which I don't think is entirely uncommon:
function animate(elem) {
var step = function (timestamp) {
//Do some stuff here.
if (progressedTime < totalTime) {
return requestAnimationFrame(step); //This return value seems useless.
}
};
return requestAnimationFrame(step);
}
//Elsewhere in the code, not in the global namespace.
var timerId = animate(elem);
//A second or two later, before the animation is over.
cancelAnimationFrame(timerId); //Doesn't work!
Because all subsequent calls to requestAnimationFrame are within the step function, I don't have access to the returned timer ID in the event that I want to call cancelAnimationFrame.
Looking at the way Mozilla (and apparently others do it), it looks like they declare a global variable in their code (myReq in the Mozilla code), and then assign the return value of each call to requestAnimationFrame to that variable so that it can be used any time for cancelAnimationFrame.
Is there any way to do this without declaring a global variable?
Thank you.
It doesn't need to be a global variable; it just needs to have scope such that both animate and cancel can access it. I.e. you can encapsulate it. For example, something like this:
var Animation = function(elem) {
var timerID;
var step = function() {
// ...
timerID = requestAnimationFrame(step);
};
return {
start: function() {
timerID = requestAnimationFrame(step);
}
cancel: function() {
cancelAnimationFrame(timerID);
}
};
})();
var animation = new Animation(elem);
animation.start();
animation.cancel();
timerID; // error, not global.
EDIT: You don't need to code it every time - that's why we are doing programming, after all, to abstract stuff that repeats so we don't need to do it ourselves. :)
var Animation = function(step) {
var timerID;
var innerStep = function(timestamp) {
step(timestamp);
timerID = requestAnimationFrame(innerStep);
};
return {
start: function() {
timerID = requestAnimationFrame(innerStep);
}
cancel: function() {
cancelAnimationFrame(timerID);
}
};
})();
var animation1 = new Animation(function(timestamp) {
// do something with elem1
});
var animation2 = new Animation(function(timestamp) {
// do something with elem2
});

How to set Interval , clear Interval and pass an argument (timer) [duplicate]

This question already has answers here:
Stop setInterval call in JavaScript
(7 answers)
Closed 4 years ago.
documentation states that clearInterval() is required to be passed in a setIntervalId, therefore the function has to look like:
var logMe = setInterval(function () {...}, interval)
Above function is also being self-invoked as soon as the page loads.
If i try to put it in an anonymous function as below:
var logMe = function (interval) {
setInterval(function () {
console.log("whatever");
}, interval);
};
I can pass an interval argument, but I cannot stop it with:
function stopLogMe() {
window.clearInterval(logMe);
};
So the question is, can I create a function "setInterval" that I can pass an argument (interval) and also stop it using clearInterval ?
Define variable and assign timer to it when you're calling logMe function:
var interval = 2000;
var timer = null;
function logMe() {
timer = setInterval(function() {
console.log('hello!');
}, interval);
}
function stopLogMe() {
window.clearInterval(timer);
}
<button onclick="logMe();">Start</button>
<button onclick="stopLogMe();">Stop</button>
You need to somehow encapsulate the ID and the stop function inside a object or function. The ID must be in local context of the logger so it can access it when it needs to stop. It also allows you to create more then just one logger without making things to complex.
const Interval = function (fn, interval) {
this.id = setInterval(fn, interval)
this.clear= function () {
clearInterval(this.id)
}
}
// Create new logger
const myLogger = new Interval(function () {
console.log('Log me')
}, 1000)
// Clear interval after 5 seconds.
setTimeout(myLogger.clear.bind(myLogger), 5000)

Why does setInterval initiate when I'm only assigning it?

I'm assigning to a variable, a function that uses setInterval, but I don't want the function to run until I call it. However, the function is running from just the assignment statement.
sessionClock = setInterval(function() {
console.log("Hi")
}, 1000)
I have also tried like this:
sayHi = function() {
console.log("Hi");
}
var sayHiStarter = setInterval(sayHi, 1000);
Both of these initiate the function and will log "Hi" to the console.
Why is it running on assignment? And what can do I do fix this?
If you only want to bind a function to setInterval, but call it later, you can use bind:
var sessionClock = setInterval.bind(null, function() {
console.log("Hi")
}, 1000);
//... later
var myInterval = sessionClock(); // start the timer
// ... later if you need to clear it
clearInterval(myInterval);
In principle, bind returns a new function that calls your original function (in this case, setInterval) with predefined arguments. So when you call sessionClock, that returned function is called. There a other aspects to bind, but they don't seem to apply in this context.
The call to setInterval does not return a function, but an identification for the created interval. This id is used to remove the interval when you don't want it to execute anymore:
sessionClock = setInterval(function() {
console.log("Hi")
}, 1000)
...
clearInterval(sessionclock);
What you want is something like this:
sessionClock = function () {
return setInterval(function() {
console.log("Hi")
},
1000);
}
//When needed
var intervalId=sessionClock();

Can I put a method as the argument in the setInterval function?

Preety straight forward question, though I can't find the answer anywhere
I tried these two ways:
setInterval(function(){object/*or this*/.method()},500)
and
setInterval('object/*or this*/.method()',500)
setInterval in fact expects a method as the first argument, though there is an alternative syntax where the first argument can be a string of code (not recommended by most)
If you're having issues with that code, it may have to do with the scope of 'this'
setInterval(function(){this.method()},500)
In the above code, 'this' will refer to the closure itself, and wouldn't be the same as 'this.method' occurring outside of that closure. For example, the following would work:
function MyClass() {
this.thingy = 'yep this is a thingy'
}
var myClass = new MyClass()
// Will log 'MyClass yep this is a thingy'
setInterval(function() { console.log('MyClass', myClass.thingy) }, 1000)
Whereas the following will not work (presuming instantiating the object and calling foo()):
function MyOtherClass() {
this.thingy = 'also a thingy'
}
// Will log 'MyOtherClass undefined'
MyOtherClass.prototype.foo = function() {
setInterval(function() { console.log('MyOtherClass', this.thingy) }, 1000)
}
The second example will work if we get around using 'this' within the closure (presuming instantiating the object and calling bar()):
MyOtherClass.prototype.bar = function() {
var that = this
setInterval(function() { console.log('MyOtherClass', that.thingy) }, 1000)
}
Also be sure that setInterval is being passed the name of a function:
setInterval(someFunction, 500)
rather than executing a function as an argument
setInterval(someFunction(), 500)
This last line of code is usually a mistake, unless someFunction() returns a function itself ;)
The difference between your 2 ways for passing a function to setInterval is whether you want to pass your function as refrence of just copy of it. Allow me to explain it by example:
-1 Referring(demo):
var obj = {
testMethod: function () {
console.log('function (testMethod): intial output');
}
}
setInterval(function () {
obj.testMethod()
}, 1000);
obj.testMethod = function () {
console.log('function (testMethod): changed output');
}
when you run this code, the result 'll be execution of the modified version of testMethod. Because here you dont copy the function! Instead, you refer to it. So whenever function implementation is changed, the last modified version is executed.
-2 Copying(demo):
var obj = {
testMethod: function () {
console.log('function (testMethod): intial output');
}
}
setInterval(obj.testMethod, 1000);
obj.testMethod = function () {
console.log('function (testMethod): changed output');
}
Here all you do is you are passing a copy of the last defined version of the function testMethod to setInterval. So whatever changes you do to testMethod, the result of setInterval will not be changed.

Function Definitions as Arguments

var cancel = setTimeout(function(){clearTimeout(cancel);}, 500);
var cancel = setTimeout(clearTimeout(cancel), 500);
Scholastic question: The first of these two expressions work, while the second does not. The setTimeout() method is accepting a function and a duration as its arguments and both of these examples are clearly providing that. The only difference is that the first is a function definition while the second is a function invocation.
If functions designed to take a function as an argument can only handle function definitions, how do you go about providing that function with the variables it may need? For example:
stop = function(y){clearInterval(y)};
count = function(x){
var t = 0,
cancel = setInterval(function(){console.log(++t);},1000);
setTimeout(stop(cancel),x);
};
count(5000);
The function above doesn't work because it's invoking the function
stop = function(){clearInterval(cancel)};
count = function(x){
var t = 0,
cancel = setInterval(function(){console.log(++t);},1000);
setTimeout(stop,x);
};
count(5000);
The function above doesn't work because the stop() doesn't have access to the cancel variable.
Thank you in advance for attempting to educate me on the work-around for this type of issue.
The setTimeout() method is accepting a function and a duration as its
arguments and both of these examples are clearly providing that. The
only difference is that the first is a function definition while the
second is a function invocation.
Yes but when you invoke a function you return the result which could be a string, integer, etc..., so you are no longer passing a function pointer but some string, integer, ... which is not what the setTimeout function expects as first argument.
Think of the second example like this:
var result = clearTimeout(cancel); // result is now an integer
setTimeout(result, 500); // invalid because setTimeout expects a function pointer
If functions designed to take a function as an argument can only
handle function definitions, how do you go about providing that
function with the variables it may need?
You could use closures:
var stop = function(y) { clearInterval(y); };
var count = function(x) {
var t = 0,
var cancel = setInterval(function() { console.log(++t); }, 1000);
setTimeout(function() { stop(cancel); }, x);
};
count(5000);
or simply:
var count = function(x) {
var t = 0,
var cancel = setInterval(function() { console.log(++t); }, 1000);
setTimeout(function() { clearInterval(cancel); }, x);
};
count(5000);
You get around it exactly as you have in the first line of code by wrapping the function call with an anonymous function.
Try passing in the cancel variable to the anonymous function.
stop = function(cancel){clearInterval(cancel)};
count = function(x){
var t = 0,
cancel = setInterval(function(){console.log(++t);},1000);
setTimeout(stop(cancel),x);
};
count(5000);
Local variables are always injected into nested scopes, for example those introduced by function declarations via function () { }. This is what is commonly called a closure and it forms an important tool in Javascript programming.
Therefore, setTimeout( function() { stop(cancel); },x); will do, the inner function has access to the cancel variable defined in the outer scope (it can even change its value).

Categories