I am learning about react components following the documentation https://facebook.github.io/react/docs/state-and-lifecycle.html
Why do we need to use arrow function here:
this.timerID = setInterval(() => this.tick(), 1000);
Why can't I just say (obviously it doesn't work)
this.timerID = setInterval(this.tick(), 1000);
The first argument for setInterval is of type function. If you write this:
this.timerID = setInterval(this.tick(), 1000);
…then you don't pass a function, instead you execute the function this.tick immediately and then pass the value returned by that function call as an argument.
You could write it like this:
this.timerID = setInterval(this.tick, 1000);
If you omit the parentheses, you pass a reference to your this.tick function, which is then executed by setInterval after 1000 milliseconds.
setInterval takes function as first argument, in the second case it is getting a returned value
Change it to
this.timerID = setInterval(this.tick.bind(this), 1000);
or
this.timerID = setInterval(() => this.tick(), 1000);
which is probably what you need when you want to bind the function to the React context.
See this answer on why you need to bind functions in React
If you don't you could have simply written
this.timerID = setInterval(this.tick, 1000);
Why do we need to use arrow function here
Answer is simple :
see the result inside live script example...
class Persons{
scopeOne(){
// your will see the result this will display our current object 'Persons'
setInterval(function(){
console.info(' SCOPE ONEo : '+this);
},3000);
}
scopeTwo(){
setInterval(function(){
console.info(' SCOPE TWO : '+this);
}.bind(this) ,3000);
}
scopeThree(){
setInterval(() => { console.info(' SCOPE THREE : '+this) },3000);
}
}
let p = new Persons();
p.scopeOne();
p.scopeTwo();
p.scopeThree();
in first scope the result is WINDOW OBJECT so we cannot access our current class scope
so in 2nd scope we using scope with bind(this) that helps to bind our current object scope,
and in third which do same as 2nd scope calling the current object....
The simple answer to that is that the tick function needs to be able access the context of its use/ this, which is the Clock component. In other words it needs to be bound to the Clock component so that it works in the context of the Clock component and not the global context which is everything outside of the Clock component.
Functions within React classes are not bound by default and failure to bind the function will return undefined instead of the expected result.
There are several ways to bind the tick function to the Clock component example from the Reactjs website.
Arrow functions can access this which is why they are used in the example. In other words, writing an arrow function implicitly means it binds its contents to the local context (the Clock component in this case). Read more on that in this Medium article
Bind the tick function in the constructor
class Clock extends React.Component{
constructor(props){
super(props);
this.state={date: new Date()}
this.tick=this.tick.bind(this)
}
Bind the tick function in the setInterval method
componentDidMount() {
this.timerID = setInterval(this.tick.bind(this),
1000
);
}
Transform a function called tick into a variable with an anonymous function, so you can pass it as an argument without parentheses.
Taking this code (https://codepen.io/gaearon/pen/amqdNr?editors=0010) as a base, you can update like this:
componentDidMount() {
this.timerID = setInterval(this.tick,1000);
}
tick = () => {
this.setState({
date: new Date()
});
}
Generally speaking, whenever you are going to pass a function as a parameter in js that uses an object variable, you need to BIND it with its object, so you don´t lose this reference. The two ways to do this are: using arrow functions or using bind().
You need to supply a function reference, you are trying to invoke a function, unless that function returns a function reference, your code will not work
It should look like so
this.tick = function() { .... }
this.timerID = setInterval(this.tick, 1000);
If you are not using arrow function then your code should look something like this:
this.timerID = setInterval(function(){ this.tick() }, 1000);
Technically, you should be able to use the second code snippet if this.tick() returns a function.
Related
I'm trying to learn React and I don't understand why this does not do anything when I try without an arrow function
componentDidMount() {
var self = this
this.timer = window.setInterval(function () {
self.increment
}, 1000)
}
Is the correct pattern self.increment()?
So why do I need the () when I don't need it in:
componentDidMount() {
this.timer = window.setInterval(this.increment.bind(this),1000)
}
You are not invoking self.increment, you are properly scoping this for your code to work. Maybe it appears it's not working because your interval's callback does not do anything :)
Also, here's a simpler version of your code, you could omit the .bind if your function does not need to access your component's scope, but typically in react you'd want access to that:
this.timer = setInterval(this.increment.bind(this), 1000)
I am using TypeScript and Angular to build an app. In a component, I create a few timeouts and I want to be sure to cancel them when my component is destroyed. To do so, I have a Set<number> that keeps track of active timeouts. When my component is destroyed, I simply iterate over this set and cancel all my timeouts. When I create a timeout, I add its ID to the Set. My problem is that I currently don't have a way to remove the ID from the Set when the timeout has executed. I want to be able to get the timeout ID inside my callback function to remove it from the Set. Is there a way to do this?
Here is some code that could explain:
export class CustomComponent implements OnDestroy {
private activeTimeouts: Set<number> = new Set<number>();
// Method called when component is destroyed
ngOnDestroy() {
this.activeTimeouts.forEach((item) => {
clearTimeout(item);
});
}
someFunction() {
const timerID = setTimeout(() => {
console.log("Hello World");
// How can I get timerID from here?
}, 1000);
this.activeTimeouts.add(timerID);
}
}
As you can see from my code, I would like to be able to remove the timerID after console.log("Hello World"); is executed. Is there any way to do this?
You can indeed use the timerID in the scope of setTimeout.
The function that's there within setTimeout is a closure.
Closure helps when functions are probably called later on in code but need to refer to variables outside their local scope when they're called.
const timerID = setTimeout(() => {
useTimerIdentifier(timerID);
console.log("timer accessed");
}, 3000);
I am looking at this code: https://reactjs.org/docs/state-and-lifecycle.html
I do not understand why I need to use () => this.tick() instead of just this.tick(). The prior calls a function that uses this.tick(), yet when I change () => this.tick() to this.tick(), the code stops working. this.tick() is no longer being called even though it itself is a function. () => this.tick() seems to be just an unnecessary step and yet it is necessary.
I think I am misunderstanding functions as objects.
Thank you
If you pass () => this.tick() then you are passing a function.
If you pass this.tick() then you are passing the value returned by the function.
setInterval(func, delay[, param1, param2, ...]) expects a function as first parameter.
() => this.tick() is a function that when executed will call this.tick() with the appropriate context. If you didn't want to use arrow syntax, you would need to bind the this context similar to this.tick.bind(this);
The arrow function used there is needed to bind the this context, so that it can use this in it's own function.
If you would have only setTimeout( this.tick, 1000 ), it would rightfully call the function on the class, however, that function wouldn't have a this scope...
...unless you bind the this scope in the constructor, or as part of the setTimeout call itself
To do it in the constructor you would have something like
class Clock extends Component {
constructor() {
super();
this.tick = this.tick.bind(this);
}
// other functions
tick() {
this.setState(/*.. state content ..*/):
}
}
another option would be the
setTimeout( this.tick.bind( this ), 1000 );
but that would do the same as what the arrow function is doing for you anyhow, so why not use the arrow function instead.
Another option would be the experimental class properties where you would still have an arrow function, but as this is not the most optimal solution when it comes to testing, I will not directly discuss that one
Firstly, setInterval takes a function as a parameter. Hence unless this.tick returns a function, passing this.tick() to setInterval is incorrect.
setInterval defers the callback method in the event loop. And hence at the time of its execution, the current reference to this will have been lost, as its scope is within its parent function which would have completed its execution. So this would be pointing to window or undefined ins strict mode.
To make it work, you need to preserve the reference, for which we create a closure by creating a new function () => this.tick. Now the reference will be preserved even after parent funtion completes its execution.
You need to give the function a callback to be invoked. A callback is a function that is to be executed after another function has finished. For example using a setTimeout is a built-in function, you give tick a callback because once setTimeout is finished you would like tick to be invoked.
Hope this helps!
I'm trying to understand how the callback function works inside the setTimeout function. I'm aware the format is: setTimeout(callback, delay) I wrote a little test script to explore this.
test1.js
console.log("Hello")
setTimeout(function () { console.log("Goodbye!") }, 5000)
console.log("Non-blocking")
This works as expected, printing Hello <CRLF> Non-blocking and then 5 seconds later, prints Goodbye!
I then wanted to bring the function outside of the setTimeout like this:
console.log("Hello")
setTimeout(goodbye(), 5000)
console.log("Non-blocking")
function goodbye () {
console.log("Goodbye")
}
but it doesn't work and there isn't a 5 second delay between Non-blocking and Goodbye!, they print straight after each other.
It works if I remove the brackets from the function call in the timeout, like this:
setTimeout(goodbye, 5000)
but this doesn't make sense to me because that's not how you call a function. Futhermore, how would you pass arguments to the function if it looked like this?!
var name = "Adam"
console.log("Hello")
setTimeout(goodbye(name), 5000)
console.log("Non-blocking")
function goodbye (name) {
console.log("Goodbye "+name)
}
My question is really, why doesn't it work when there are parameters in the function, despite the fact the setTimeout is being provided with a valid function with the correct syntax?
By putting the parentheses after your function name, you are effectively calling it, and not passing the function as a callback.
To provide parameters to the function you are calling:
You can pass an anon function. setTimeout(function(){goodbye(name)}, 5000);
Or, you can pass the arguments as a third parameter. setTimeout(goodbye, 5000, name);
Look at this question: How can I pass a parameter to a setTimeout() callback?
No matter where you place it, goodbye(name) executes the function immediately. So you should instead pass the function itself to setTimeout(): setTimeout(goodbye, 5000, name).
When you use it like this:
setTimeout(goodbye(), 5000);
it will first call goodbye to get its return value, then it will call setTimeout using the returned value.
You should call setTimeout with a reference to a callback function, i.e. only specifying the name of the function so that you get its reference instead of calling it:
setTimeout(goodbye, 5000);
To make a function reference when you want to send a parameter to the callback function, you can wrap it in a function expression:
setTimeout(function() { goodbye(name); }, 5000);
You can use parantheses in the call, but then the function should return a function reference to the actual callback function:
setTimeout(createCallback(), 5000);
function createCallback() {
return function() {
console.log("Goodbye");
};
}
I'm currently having an issue where I have a javascript object that is trying to use setInterval to call a private function inside of itself. However, it can't find the object when I try to call it. I have a feeling that it's because window.setInterval is trying to call into the object from outside but doesn't have a reference to the object. FWIW - I can't get it to work with the function being public either.
The basic requirement is that I may need to have multiple instances of this object to track multiple uploads that are occurring at once. If you have a better design than the current one or can get the current one working then I'm all ears.
The following code is meant to continuously ping a web service to get the status of my file upload:
var FileUploader = function(uploadKey) {
var intervalId;
var UpdateProgress = function() {
$.get('someWebService', {},
function(json) {
alert('success');
});
};
return {
BeginTrackProgress: function() {
intervalId = window.setInterval('UpdateProgress()', 1500);
},
EndTrackProgress: function() {
clearInterval(intervalId);
}
};
};
This is how it is being called:
var fileUploader = new FileUploader('myFileKey');
fileUploader.BeginTrackProgress();
Use this
intervalId = window.setInterval(UpdateProgress, 1500);
setInterval with a literal argument will eval this in the global scope where UpdateProgress is not accessible.
Because it is an eval expression, it does not have access to the scope that setInterval is created in. Try:
intervalId = window.setInterval(UpdateProgress, 1500)
It is generally good practice to avoid eval style expressions wherever possible. For instance, if you wanted to call several functions from the same timer, you would use an anonymous function instead of a string.
window.setInterval(function () {
function1();
function2();
}, 1500)
See also
Why is using javascript eval() a bad idea?
Anonymous function - Wikipedia
+1 to Andy E's head (I can't upvote yet, doh!)
Another gotcha that could get you is if you use this from within the called function.
Then doing exactly what Andy has with this addition should get you by.
var that = this;
window.setInterval(function() {
function1.apply(that);
function2.apply(that);
}, 1500);