Function

next (target, method, args*) Object public

Module: @ember/runloop
import { next } from '@ember/runloop';
target
Object
target of method to invoke
method
Function|String
The method to invoke. If you pass a string it will be resolved on the target at the time the method is invoked.
args*
Object
Optional arguments to pass to the timeout.
returns
Object
Timer information for use in canceling, see `cancel`.

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

import { next } from '@ember/runloop';

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

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

Note that there are often alternatives to using 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:

component.js
import Component from '@ember/component';
import { scheduleOnce } from '@ember/runloop';

export Component.extend({
  didInsertElement() {
    this._super(...arguments);
    scheduleOnce('afterRender', this, 'processChildElements');
  },

  processChildElements() {
    // ... do something with component's child component
    // elements after they've finished rendering, which
    // can't be done within this component'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 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 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 next.

© 2020 Yehuda Katz, Tom Dale and Ember.js contributors
Licensed under the MIT License.
https://api.emberjs.com/ember/3.25/functions/@ember%2Frunloop/next