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? — Duncan
– Duncan, Commented Sep 19, 2017 at 15:01

Suren Srapyan · Accepted Answer · 2017-09-19 15:01:32Z

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, 2017 at 15:01

answered Sep 19, 2017 at 14:59

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Suren Srapyan Over a year ago

@Bharat Read that SO answer and you will understand

cyr_x · Accepted Answer · 2017-09-19 14:59:51Z

1

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

answered Sep 19, 2017 at 14:59

cyr_x

14.3k2 gold badges35 silver badges48 bronze badges

Comments

Ben · Accepted Answer · 2017-09-19 15:05:32Z

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, 2017 at 15:05

Ben

2,7261 gold badge15 silver badges16 bronze badges

2 Comments

Bharat Over a year ago

I am using Angular 4.3, and It seems $interval is not easy to use in 4.3.

Ben Over a year ago

@Bharat, ahh judging by the usage of ES5 and the tag 'AngularJS' I assumed you were using AngularJS 1.x.

Alex Maximenko · Accepted Answer · 2017-09-19 15:11:07Z

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

alt255 · Accepted Answer · 2017-09-19 16:32:11Z

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, 2017 at 16:32

answered Sep 19, 2017 at 15:00

alt255

3,6262 gold badges17 silver badges22 bronze badges

Collectives™ on Stack Overflow

Combine 2 function of javascript / Type script into one

5 Answers 5

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related