How to ensure a child component calls parent function after Ember.run.later is completed in Ember

Question

In a parent component, I have the following:

.
.
.
recurringFunc: function(delay, index){
  .
  .
  .
  if (someFlag){
    Ember.run.later(_this, function() {
      _this.send('otherFunc',{index: index});
      _this.send('recurringFunc', delay, ++index);
    }, delay);
  }
},


otherFunc: function(somePara){
  .
  .
  .
}

In parent template I have the following:

.
.
.
{{template-name someFlag=someFlag}}
.
.
.

Then in the child componoent I have the following:

input: function(){
  this.set('someFlag', false);
  this.sendAction('otherFunc', {index: someVal});
}

When the action if fired from the child component, it successfully, changes someFlag in the parent. But the code does not wait for the last Ember.run.later iteration in the parent to run, before it executes the otherFunc call that was initiated from the child.

I have other code that I have abbreviated that is dependent on the otherFunc running after the last iteration of Ember.run.later.

How do I call a parent component function from a child component and ensure the Ember.run.later is finished before the child function called is executed?

Answer 1

For anyone who runs into this problem, this is what I did.

I made delay a property on the parent component and updated otherFunc in the parent component as follows:

otherFunc: function(somePara){
  var currentDelay = this.get('delay');
  Ember.run.later(_this, function() {
    .
    .
    .
    .
  }, currentDelay);
}

This will call the new instructions after the last delay is finished from recurringFunc.