从聚合物属性观察者去抖动似乎失败了

Question

如果我通过单击按钮调用 Polymer debouncer，它可以完美运行。我在不到 2 秒的时间内点击了 5 次，只打印一个时间戳：

myProofOfConcept(){ this.__debouncer = Polymer.Debouncer.debounce( .__debouncer, Polymer.Async.timeOut.after(2000), () => { console.log("HEY " + Date.now()); }); }

但是，如果我从 Polymer 属性更改观察者调用完全相同的方法，它将等待所需的 2 秒超时，然后控制台打印观察者调用它的次数，即使相隔仅 1 毫秒。

是否有一些我不知道的外部因素导致了这种行为差异？

Answer 1

如果您遇到这种情况，请注意以下事项。

如果您在 Web 组件中对方法进行去抖动... 然后您在您的 Web 应用程序中实例化该组件的多个实例......在您看来，去抖动器可能无法正常工作，而实际上它可能正在工作，而只是在同一 Web 组件的多个实例中工作。

我在一个完全不同的页面中有一个杂散的 Web 组件实例。没有使用过，甚至没有注意到。当我将它迁移到其他页面时，我只是忘记将其删除。

Answer 2

编辑：控制元素的所有实例的去抖动以及从多个位置更改的属性（按钮单击和 setInterval）。

应用时似乎很好：

<dom-module id="my-element">

<template>
  <style>
    :host {
      display: block;
    }
  </style>
  [[prop]]
  <button on-click="add">Test</button>
</template>

<script>
(function() {
  let DEBOUNCED_METHOD;
  HTMLImports.whenReady(function() {
    class MyElement extends Polymer.Element {
      static get is() { return 'my-element'; }
      static get properties() {
        return {
          prop: {
            value: 0,
            type: Number,
            observer: 'myProofOfConcept'
          }
        }
      }
      constructor() {
        super();
        let test = setInterval(() => {
          this.add();
        }, 400);
        setTimeout(() => {
          clearInterval(test);
        }, 4500)
      }
      add() {
        this.prop += 1;
      }
      myProofOfConcept(){
        DEBOUNCED_METHOD = Polymer.Debouncer.debounce(
          DEBOUNCED_METHOD,
          Polymer.Async.timeOut.after(2000),
          this.log);
      }
      log() {
        console.log("HEY " + Date.now());
      }
    }
    customElements.define(MyElement.is, MyElement);
  });
}())
</script>

希望有帮助！