Debouncer in Polymer 2.0

Question

Simple question, but no documentation is to be found on the subject : is there a debouncer in Polymer 2.0? If so, how can it be used? this.debounce was an instance method in 1.0, but it appears to have disappeared.

Thanks in advance!

Answer 1

Legacy 1.x debouncer

You can use the 1.x this.debounce() method via Polymer.LegacyElementMixin:

class XFoo extends Polymer.LegacyElementMixin(Polymer.Element) {
  ...
  _onClick() {
    this.debounce('myDebouncer', callback, 2000);
  }
}

codepen

New 2.x debouncer

The 2.0 equivalent is Polymer.Debouncer.debounce(debouncer, asyncModule, cb), where:

• debouncer

  An instance of a Polymer.Debouncer returned from Polymer.Debouncer.debounce(), used to uniquely identify the debouncer job. This is the equivalent to the 1.x debouncer job name string. This can be initially undefined/null to create a new instance.

• asyncModule

  One of the following:

  • Polymer.Async.timeOut.after(TIMEOUT_MS)
  • Polymer.Async.idlePeriod
  • Polymer.Async.microTask
  • Polymer.Async.animationFrame

• cb

  Callback to invoke when the asyncModule completes

This function returns a Polymer.Debouncer instance, which has a cancel() method, equivalent to 1.x this.cancelDebouncer(JOB_NAME). That instance should be passed to the debounce() method on the next call for debouncing to work properly.

Example usage:

class XFoo extends Polymer.Element {
  ...
  _onClick() {
    this._debouncer = Polymer.Debouncer.debounce(
       this._debouncer, // initially undefined
       Polymer.Async.timeOut.after(2000),
       callback);
  }
}

codepen