Accelerating Increment / Decrement Buttons

This example demonstrates a few different concepts:

  • Tricky time-based operations like acceleration are simplified by the sequential style of task functions
  • You can use (perform taskName) in place of anywhere you might want to use a classic Ember action.
Live Example

Num: 0

(Hold down the buttons to accelerate.)

JavaScript (task)
export default Controller.extend({
  count: 0,
  incrementBy: task(function * (inc) {
    let speed = 400;
    while (true) {
      this.incrementProperty('count', inc);
      yield timeout(speed);
      speed = Math.max(50, speed * 0.8);
JavaScript (button component)
function sendPress() {

function sendRelease() {

export default Component.extend({
  tagName: 'button',

  touchStart: sendPress,
  mouseDown:  sendPress,
  touchEnd:   sendRelease,
  mouseLeave: sendRelease,
  mouseUp:    sendRelease,
    press=(perform incrementBy -1)
    release=(cancel-all incrementBy)}}

    press=(perform incrementBy 1)
    release=(cancel-all incrementBy)}}