setInterval function without arrow function

arrow function vs function
setinterval not working
settimeout arrow function
javascript arrow function return object
arrow functions do not have their own this.
setinterval typescript
angular setinterval
jquery setinterval(function)

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.

ES6 Arrow functions Sample, Sample illustrating the use of ES6 Arrow functions. expression . If using an expression after an arrow, the return is implicit, so no return is required. The JavaScript setInterval function can be used to automate a task using a regular time based trigger. Just to be clear, setInterval () is a native JavaScript function. This function is very

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);

Scheduling: setTimeout and setInterval, setInterval allows us to run a function repeatedly, starting after the But using strings is not recommended, use arrow functions instead of them,  setInterval() is a function that calls another function after a set number of milliseconds. Let’s add it to our Counter function: function Counter() {this.num = 0; this.timer = setInterval(function add() {this.num++; console.log(this.num);}, 1000);} Code looks the same as before, except we’ve added a variable, this.timer and set it equal to our setInterval function. Every 1000 milliseconds (one second) the code will run.

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);

JavaScript: Arrow Functions for Beginners, If we have no parameters, we express an arrow function like this: setInterval() is a function that calls another function after a set number of milliseconds. An arrow function is a syntax that defines as a function in an expression without using the function keyword. They're great because of their terse, understandable syntax. They're great because of their terse, understandable syntax.

If you are not using arrow function then your code should look something like this:

this.timerID = setInterval(function(){ this.tick() }, 1000);

Arrow function expressions, An arrow function expression is a syntactically compact alternative to a regular function function Person() { var that = this; that.age = 0; setInterval(function growUp() { // The callback Arrow functions do not have their own arguments object. Definition and Usage. The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds). The setInterval() method will continue calling the function until clearInterval() is called, or the window is closed. The ID value returned by setInterval() is used as the parameter for the clearInterval()

Technically, you should be able to use the second code snippet if this.tick() returns a function.

What are JavaScript Arrow Functions?, Let's look at an example using regular functions without the arrow functions. is passed as a parameter to the JavaScript setInterval() function. We may decide to execute a function not right now, but at a certain time later. That’s called “scheduling a call”. setTimeout allows us to run a function once after the interval of time. setInterval allows us to run a function repeatedly, starting after the interval of time, then repeating continuously at that interval.

JavaScript Window Methods Explained with Examples, The window.location object can be written without the window prefix, The setInterval() method calls a function or evaluates an expression at  An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.

(JavaScript )=> Arrow functions - podiihq, this.age = 0; // age in this case is for that person instance setInterval(function The arrow function does not create its own this hence we can use it to refer to the​  Functions implemented in the top level component (here, it was App) will be seen by all child components. In this example, we have a StackView which means, all pages that are pushed to the StackView will have access to the setTimeout() function. 4. Arrow functions The first parameter to setTimeout() refers to a function or code.

Anomalies in JavaScript arrow functions, Although arrow functions have a pretty simple syntax, that will not be the focus of this article. Arrow functions do not have an arguments binding. setInterval() callback function to the newly created instance object as follows  In cases when functions takes longer than delay mentioned in setInterval (like ajax call, which might it prevent from completing on time), we will find that either functions have no breathing room or setInterval breaks it's rhythm.

Comments
  • this.timerID = setInterval(function(){ this.tick() }.bind(this), 1000);
  • Yes, but it would still not be equivalent to the first example, and this doesn't answer OPs question.
  • That's true. Apart from the previous answers given, do you think it might be due to "saving the this value"? Like the two snippets could have different this values