Ember.run Namespace packages/ember-metal/lib/run_loop.js:27

Begins a new RunLoop. Any deferred actions invoked after the begin will be buffered until you invoke a matching call to Ember.run.end(). This is a lower-level way to use a RunLoop instead of using Ember.run().

1
2
3

Ember.run.begin();
// code to be execute within a RunLoop
Ember.run.end();

Cancels a scheduled item. Must be a value returned by Ember.run.later(), Ember.run.once(), or Ember.run.next().

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var runNext = Ember.run.next(myContext, function() {
  // will not be executed
});
Ember.run.cancel(runNext);

var runLater = Ember.run.later(myContext, function() {
  // will not be executed
}, 500);
Ember.run.cancel(runLater);

var runOnce = Ember.run.once(myContext, function() {
  // will not be executed
});
Ember.run.cancel(runOnce);

Delay calling the target method until the debounce period has elapsed with no additional debounce calls. If debounce is called again before the specified time has elapsed, the timer is reset and the entire period must pass again before the target method is called.

This method should be used when an event may be called multiple times but the action should only be called once when the event is done firing. A common example is for scroll events where you only want updates to happen once scrolling has ceased.

1
2
3
4
5
6
7
8
9
10
11
12

  var myFunc = function() { console.log(this.name + ' ran.'); };
  var myContext = {name: 'debounce'};

  Ember.run.debounce(myContext, myFunc, 150);

  // less than 150ms passes

  Ember.run.debounce(myContext, myFunc, 150);

  // 150ms passes
  // myFunc is invoked with context myContext
  // console logs 'debounce ran.' one time.

Ends a RunLoop. This must be called sometime after you call Ember.run.begin() to flush any deferred actions. This is a lower-level way to use a RunLoop instead of using Ember.run().

1
2
3

Ember.run.begin();
// code to be execute within a RunLoop
Ember.run.end();

If no run-loop is present, it creates a new one. If a run loop is present it will queue itself to run on the existing run-loops action queue. Please note: This is not for normal usage, and should be used sparingly. If invoked when not within a run loop: javascript Ember.run.join(function() { // creates a new run-loop }); Alternatively, if called within an existing run loop: javascript Ember.run(function() { // creates a new run-loop Ember.run.join(function() { // joins with the existing run-loop, and queues for invocation on // the existing run-loops action queue. }); });

Invokes the passed target/method and optional arguments after a specified period if time. The last parameter of this method must always be a number of milliseconds.

You should use this method whenever you need to run some action after a period of time instead of using setTimeout(). This method will ensure that items that expire during the same script execution cycle all execute together, which is often more efficient than using a real setTimeout.

1
2
3

Ember.run.later(myContext, function() {
  // code here will execute within a RunLoop in about 500ms with this == myContext
}, 500);

Schedules an item to run from within a separate run loop, after control has been returned to the system. This is equivalent to calling Ember.run.later with a wait time of 1ms.

1
2
3

Ember.run.next(myContext, function() {
  // code to be executed in the next run loop, which will be scheduled after the current one
});

Multiple operations scheduled with Ember.run.next will coalesce into the same later run loop, along with any other operations scheduled by Ember.run.later that expire right around the same time that Ember.run.next operations will fire.

Note that there are often alternatives to using Ember.run.next. For instance, if you'd like to schedule an operation to happen after all DOM element operations have completed within the current run loop, you can make use of the afterRender run loop queue (added by the ember-views package, along with the preceding render queue where all the DOM element operations happen). Example:

1
2
3
4
5
6
7
8
9
10
11
12

App.MyCollectionView = Ember.CollectionView.extend({
  didInsertElement: function() {
    Ember.run.scheduleOnce('afterRender', this, 'processChildElements');
  },
  processChildElements: function() {
    // ... do something with collectionView's child view
    // elements after they've finished rendering, which
    // can't be done within the CollectionView's
    // `didInsertElement` hook because that gets run
    // before the child elements have been added to the DOM.
  }
});

One benefit of the above approach compared to using Ember.run.next is that you will be able to perform DOM/CSS operations before unprocessed elements are rendered to the screen, which may prevent flickering or other artifacts caused by delaying processing until after rendering.

The other major benefit to the above approach is that Ember.run.next introduces an element of non-determinism, which can make things much harder to test, due to its reliance on setTimeout; it's much harder to guarantee the order of scheduled operations when they are scheduled outside of the current run loop, i.e. with Ember.run.next.

Schedule a function to run one time during the current RunLoop. This is equivalent to calling scheduleOnce with the "actions" queue.

Adds the passed target/method and any optional arguments to the named queue to be executed at the end of the RunLoop. If you have not already started a RunLoop when calling this method one will be started for you automatically.

At the end of a RunLoop, any methods scheduled in this way will be invoked. Methods will be invoked in an order matching the named queues defined in the Ember.run.queues property.

1
2
3
4
5
6
7
8
9
10
11
12
13

Ember.run.schedule('sync', this, function() {
  // this will be executed in the first RunLoop queue, when bindings are synced
  console.log("scheduled on sync queue");
});

Ember.run.schedule('actions', this, function() {
  // this will be executed in the 'actions' queue, after bindings have synced.
  console.log("scheduled on actions queue");
});

// Note the functions will be run in order based on the run queues order. Output would be:
//   scheduled on sync queue
//   scheduled on actions queue

Schedules a function to run one time in a given queue of the current RunLoop. Calling this method with the same queue/target/method combination will have no effect (past the initial call).

Note that although you can pass optional arguments these will not be considered when looking for duplicates. New arguments will replace previous calls.

1
2
3
4
5
6

Ember.run(function() {
  var sayHi = function() { console.log('hi'); }
  Ember.run.scheduleOnce('afterRender', myContext, sayHi);
  Ember.run.scheduleOnce('afterRender', myContext, sayHi);
  // sayHi will only be executed once, in the afterRender queue of the RunLoop
});

Also note that passing an anonymous function to Ember.run.scheduleOnce will not prevent additional calls with an identical anonymous function from scheduling the items multiple times, e.g.:

1
2
3
4
5
6
7
8

function scheduleIt() {
  Ember.run.scheduleOnce('actions', myContext, function() { console.log("Closure"); });
}
scheduleIt();
scheduleIt();
// "Closure" will print twice, even though we're using `Ember.run.scheduleOnce`,
// because the function we pass to it is anonymous and won't match the
// previously scheduled operation.

Available queues, and their order, can be found at Ember.run.queues

Immediately flushes any events scheduled in the 'sync' queue. Bindings use this queue so this method is a useful way to immediately force all bindings in the application to sync.

You should call this method anytime you need any changed state to propagate throughout the app immediately without repainting the UI (which happens in the later 'render' queue added by the ember-views package).

1

Ember.run.sync();

Ensure that the target method is never called more frequently than the specified spacing period.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

  var myFunc = function() { console.log(this.name + ' ran.'); };
  var myContext = {name: 'throttle'};

  Ember.run.throttle(myContext, myFunc, 150);

  // 50ms passes
  Ember.run.throttle(myContext, myFunc, 150);

  // 50ms passes
  Ember.run.throttle(myContext, myFunc, 150);

  // 50ms passes
  Ember.run.throttle(myContext, myFunc, 150);

  // 150ms passes
  // myFunc is invoked with context myContext
  // console logs 'throttle ran.' twice, 150ms apart.