Combine 2 function of javascript / Type script into one

Question

I Have one Date variable, and I am updating it every second to make it live.

Now here is my variable.

var stationdate = new Date(data.localTime);

My Javascript code to update it per second.

window.setInterval(function () {        
    stationdate = new Date(stationdate.setSeconds(stationdate.getSeconds() + 1));            
  }, 1000);

And My Type Script code to return it to Angular UI.

window.setInterval(() => this.time = stationdate, 1000);

My Issue.

It works perfectly if both functions are seprate.

but it stops working if I combine them.

see below.

window.setInterval(function () {        
    stationdate = new Date(stationdate.setSeconds(stationdate.getSeconds() + 1));
    this.time = stationdate;            
  }, 1000);

AM I MISSING SOMETHING WITH FAT ARROW OF TYPE SCRIPT?

What should be the proper function?

Possible duplicate of [Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?](https://stackoverflow.com/questions/34361379/arrow-function-vs-function-declaration-expressions-are-they-equivalent-exch) — Duncan, Sep 19 '17 at 15:01

Suren Srapyan · Accepted Answer · 2017-09-19T15:01:32.130

5

Each function has it's own this context. So your this refers to another object in the function expression. With arrow function it refers to the outer this which contains that arrow function.

Use arrow syntax and there is no necessary to use window prefix behind the setInterval.

setInterval(() => {        
    stationdate = new Date(stationdate.setSeconds(stationdate.getSeconds() + 1));
    this.time = stationdate;            
  }, 1000);

For more read Arrow function vs function declaration/expression - this is one of the main concepts in Javascript.

edited Sep 19 '17 at 15:01

answered Sep 19 '17 at 14:59

Suren Srapyan

66,568
14
114
112

1

@Bharat Read that SO answer and you will understand – Suren Srapyan Sep 19 '17 at 15:03

score 1 · Answer 2 · answered Sep 19 '17 at 14:59

In your combination of both function your not using an arrow function, which leads to the context of this is window. Use an arrow function to keep the outer context of this.

window.setInterval(() => {        
    stationdate = new Date(stationdate.setSeconds(stationdate.getSeconds() + 1));
    this.time = stationdate;            
}, 1000);

alt255 · Answer 3 · 2017-09-19T16:32:11.257

1

window.setInterval( () => {        
    stationdate = new Date(stationdate.setSeconds(stationdate.getSeconds() + 1));
    this.time = stationdate;            
  }, 1000);

In your code this has wrong context. The fat arrow function is feature of ES6 and has nothing to do with TypeScript

edited Sep 19 '17 at 16:32

answered Sep 19 '17 at 15:00

alt255

3,396
2
14
20

score 1 · Answer 4 · answered Sep 19 '17 at 15:05

1

In your second example, this refers to the inner-scope of your function not the outer scope where your variable is most likely defined. Therefore as others have suggested, you need to use the lambda symbol.

Also, since you're using AngularJS it would be preferable to use $interval instead of window.setInterval().

Note that by using $interval, a $scope.$apply() will be made to do dirty-checking if your variable has changed and then update the UI. This is not a given when using window.setInterval(). Alternatively, you can still tell $interval to not use $apply if that is something you need.

answered Sep 19 '17 at 15:05

Ben

2,441
1
12
16

I am using Angular 4.3, and It seems $interval is not easy to use in 4.3. – Bharat Sep 19 '17 at 15:07
1

@Bharat, ahh judging by the usage of ES5 and the tag 'AngularJS' I assumed you were using AngularJS 1.x. – Ben Sep 19 '17 at 15:14

score 1 · Answer 5 · answered Sep 19 '17 at 15:11

It common bug of using callbacks. All in javascript has own 'this' context (except arrow functions). Just for systems function this===undefined.

So proper way is use arrow function (as it shown above). Best for modern browsers (or transpiled code).

 window.setInterval(() => {        
    stationdate = new Date(stationdate.setSeconds(stationdate.getSeconds() + 1));
    this.time = stationdate;            
  }, 1000);

Another way to store 'this' is binding context:

window.setInterval((function () {        
    stationdate = new Date(stationdate.setSeconds(stationdate.getSeconds() + 1));
    this.time = stationdate;            
  }).bind(this), 1000);

Or more explanation:

window.setInterval(
    (function(){console.log(this.hello);}).bind({hello:'hello!'})
   , 1000);

Combine 2 function of javascript / Type script into one

5 Answers5