Question

如果我通过按钮点击聚合物去抖动器，它可以完美地工作。我在不到2秒的时间内点击了5次，只打印了一个时间戳：

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

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

是否存在一些我不知道的外部因素，即推动这种行为差异？

Answer 1

编辑：控制元素的所有实例的debouncing以及从多个位置（按钮点击和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>

希望有所帮助！

Answer 2

如果发生这种情况，可以寻找这些内容。

如果您在Web组件中去抖动方法... 然后你在你的web应用程序中实例化该组件的多个实例......你可能觉得debouncer不工作，而实际上它可能正在工作，而只是在同一个Web组件的多个实例中工作。

我在一个完全不同的页面中有一个虚构的Web组件实例。没有被使用，甚至没有注意到。当我将它迁移到另一个页面时，我忘了删除它。

从Polymer属性观察者中去抖似乎失败了

2 个答案: