Search code examples
polymerpolymer-3.x

Debouncer in Polymer 3.0


How to properly write debouncer in Polymer 3 ?

According to documentation

import {microTask} from '@polymer/polymer/lib/utils/async.js';
import {Debouncer} from '@polymer/polymer/lib/utils/debounce.js';
// ...

_debounceWork() {
  this._debounceJob = Debouncer.debounce(this._debounceJob,
      microTask, () => this._doWork());
}

This is nice, but I need to configure some timing. For example, this is how I have been doing it in Polymer 1

  this.debounce("scroll",function() {
      this.$$("#scrollThreshold").clearTriggers();
  }.bind(this), 400);

and Polymer 2

this._debouncer = Polymer.Debouncer.debounce(
    this._debouncer, // initially undefined
    Polymer.Async.timeOut.after(400),
    () => {
       // some code
    }
);

but I have no idea how to set 400ms debounce in Polymer 3


Solution

  • The async module has the timeout function but you need to import it

    import {timeOut} from '@polymer/polymer/lib/utils/async.js';
    
    this._debouncer = Debouncer.debounce(
        this._debouncer, // initially undefined
        timeOut.after(400),
        () => {
           // some code
        }
    );