JavaScript: how to put things in the end of the call stack?

Question

I am working in angular(2) and more and more I get into situation where I need to wait for angular to do its magic and then execute my code. all its actually means is just to put the action in the end of the call stack(which I achieve right now by setting a time-out for 0 ms and a comment explaining my actions). But that seems like being a smart ass. I heard people talking about ngOnChange, but that seems even worse, I mean on every change of every element I need to execute this code which happens in such rare cases?

recent example would be when user changes view, I want the video to start playing(same component).

edit:

here is some code to visualize the problem(solving it is not the issue, since I have other cases when I need to place items on the back of the call stack):

switchInnerAddRuleView(innerView: string): void {
    this.innerAddRuleView = innerView;
    if (innerView === 'camera') {
        setTimeout( _ => this.videoPlayOn(0, true) , 0);
    }
}

videoPlayOn(time: number, isPolygon: boolean = false): void {
    const videoPlayerElement: string = (isPolygon) ? 
   'elPolygonVideoPlayer' : 'elVideoPlayer';
    this[videoPlayerElement].nativeElement.currentTime = time;
    if (this[videoPlayerElement].nativeElement.paused) {
      this[videoPlayerElement].nativeElement.play();
    }
}

template:

<button (click)="switchInnerAddRuleView('camera')"><button>
<div *ngIf="innerAddRuleView === 'camera'" class="step-two">
        <video #polygonVideoPlayer preload="auto" class="video" [src]="currentDetectionOnView.camera.liveStreamUrl"></video>
      </div>

So my question is, how do I put something on the end of the call stack in the correct way? or is setTimeout the only option I have?

Mind posting some of your code? Seems a bit odd that you would have to wait for angular so often. — Niles Tanner, Nov 22 '17 at 14:05
yBrodsky, I said in the same component, ngOnInit won't help here, updated with some code — Efim Rozovsky, Nov 22 '17 at 14:23
I guess, it should be 'some code that makes sense', not 'some code' literally. `switchInnerAddRuleView` isn't called anywhere. `videoPlayOn` isn't defined. Please, provide the question with http://stackoverflow.com/help/mcve . — Estus Flask, Nov 22 '17 at 14:37
Thank You, updated according to the guidelines, should be understandable now — Efim Rozovsky, Nov 22 '17 at 14:59

score 0 · Answer 1 · answered Nov 22 '17 at 14:58

0

maybe use the ngAfterViewInit and execute the code there

https://angular.io/guide/lifecycle-hooks

answered Nov 22 '17 at 14:58

Ricardo Umpierrez

768
2
11
24

There is no change of components, ngAfterViewInit is not called here, the video player is created when the the condition is right in the 'ngIf' – Efim Rozovsky Nov 22 '17 at 15:00
Maybe you can create a component that has the video as html, and execute in his ngAfterViewInit? – Ricardo Umpierrez Nov 22 '17 at 15:03
I am not trying to solve this one little problem, I want to know how to put something on the end of the call stack of javascript.... – Efim Rozovsky Nov 22 '17 at 15:11

score 0 · Answer 2 · answered Nov 22 '17 at 15:16

0

Your component should implement OnChanges instead of OnInit and do the required action in ngOnChanges() func

ngOnChanges(){
 if (this.innerAddRuleView === 'camera') {
        this.videoPlayOn(0, true);
}

answered Nov 22 '17 at 15:16

sancelot

1,905
12
31

ngOnChanges fired every change, that would be really heavy on my browser to do that check each time, not even talking about that your code would need some tweaking in order for the video not to loop on each unrelated change, something that seems dirtier than actualy doing setTimeout – Efim Rozovsky Nov 22 '17 at 15:31
this is a minor problem, if you managed rising edge of start / stop player. in any way, you have to use a timeout through a Promise or Observable to launch VideoPlayer. Observable sounds to be better since it is cancelable. have a look at this https://stackoverflow.com/questions/37364973/angular-promise-vs-observable – sancelot Nov 23 '17 at 07:30

JavaScript: how to put things in the end of the call stack?

2 Answers2