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!

Nena

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

Bagworm

@Nena No problem :) – Bagworm

I'm not sure to understand what is the first argument for, most of the time you'll use the same reference as the one returned by the function. This looks hacky. – Quintus

For anyone else blindly copying — Polymer.Async.timeout.after should in fact be Polymer.Async.timeOut.after (uppercase O). – Handily