Yesterday we took a brief look at Ember's run loop. Today we are going to look at some of the other functions available to us under the Ember.run namespace.

We will very briefly look at:

  1. run.later
  2. run.once
  3. run.next
  4. run.debounce
  5. run.throttle

Ember.run.later

The most common run method that you will likely use is Ember.run.later(). You will use this method anytime you might normally want to use setTimeout. Ember.run.later works just about the same, but it respects Ember's run loop, which will keep you as a developer happy.

The easiest way to use this method is to pass a callback and the wait in milliseconds. As part of an action on a component it might look like this:

actions: {
  runLaterAction(){
    Ember.run.later(() => console.log('running later!!!'), 5000);
  }
}

Then you could invoke this action from the template like this:

<button {{action 'runLaterAction'}}>Run Later Button</button>

Ember.run.once

We looked at Ember.run.scheduleOnce() yesterday, this is the same as calling that and passing in the actions queue. So, Ember.run.scheduleOnce('actions', func1); and Ember.run.once(func1) should be functionally identical. This is just a way to make sure that in a given run loop, in the actions queue a function only gets called one time.

const func1 = () => console.log('func1 called.');
// ...
actions: {
  runOnceAction(){
    Ember.run.once(func1);
    Ember.run.once(func1);
    Ember.run.once(func1);
    Ember.run.once(func1);
  }
}

Invoking this action will only call func1 a single time.

Ember.run.next

This method just runs the passed in code on the next run loop. As is pointed out in the guides, there are often better ways to accomplish what you might be trying to accomplish with this method. It works just like calling Ember.run.later and passing in a wait of 1 millisecond.

const func1 = () => console.log('func1 called.');
...
actions: {
  runNextAction(){
    Ember.run.next(func1);
  }
}

Ember.run.debounce

This method works exactly as you would expect a debounce method to work. It takes as params the optional context, the function being called, and the debounce wait time. There is also an optional final boolean param that, if set to true, tells the function to execute immediately then debounce additional calls. This last param defaults to false. Using this method might look like this:

import Ember from 'ember';

export default Ember.Controller.extend({
  logit(){
    console.log('debounced...');
  },
  actions: {
    callDebounce(){
      Ember.run.debounce(this, 'logit', 300);
    }
  }
<input onKeyPress={{action 'callDebounce'}}>

There is also a throttle method that works to make sure that calls aren't made too often. I haven't ever needed this method. In practice, I find myself using debounce, and I can't quite find the right use case for this. But it exists, so if you find yourself needing it have a look at the api.

That is it for today, tomorrow we will take a quick look at observers. See you then.