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 class IncrementButtonsController extends Controller {
  count = 0;

  @task *incrementBy(inc) {
    let speed = 400;
    while (true) {
      this.incrementProperty('count', inc);
      yield timeout(speed);
      speed = Math.max(50, speed * 0.8);
    }
  }
}
Template
<p>
  <PressAndHoldButton @press={{perform this.incrementBy -1}} @release={{cancel-all this.incrementBy}}>
    --Decrease
  </PressAndHoldButton>

  <PressAndHoldButton @press={{perform this.incrementBy 1}} @release={{cancel-all this.incrementBy}}>
    Increase++
  </PressAndHoldButton>
</p>
Template (button component)
<button
  {{on "touchstart" @press}}
  {{on "mousedown" @press}}
  {{on "touchend" @release}}
  {{on "mouseleave" @release}}
  {{on "mouseup" @release}}
  type="button">
  {{yield}}
</button>