CODEWITHSUNDEEP
javascriptangulartypescript
Bharat
Bharat

Reputation: 6095

Combine 2 function of javascript / Type script into one

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?

Upvotes: 0

Views: 89

Answers (5)

alt255
alt255

Reputation: 3576

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

Upvotes: 1

Alex Maximenko
Alex Maximenko

Reputation: 121

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

Upvotes: 1

Ben
Ben

Reputation: 2706

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.

Upvotes: 1

Suren Srapyan
Suren Srapyan

Reputation: 68685

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.

Upvotes: 5

cyr_x
cyr_x

Reputation: 14267

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

Upvotes: 1

Related Questions