如何使用观察者聚合物去抖动

Question

我正在尝试在 Web 组件完成加载时运行一次 getResponse。但是，当我尝试运行它时，debounce 函数只是充当异步延迟，并在 5000 毫秒后运行 4 次。

static get properties() {
  return {
    procedure: {
      type: String,
      observer: 'debounce'
    }
  }
}

debounce() {
  this._debouncer = Polymer.Debouncer.debounce(this._debouncer, Polymer.Async.timeOut.after(5000), () => {
    this.getResponse();
  });
}

getResponse() {
  console.log('get resp');
}

在加载元素时让getResponse 运行一次需要什么？

Answer 1

您确定要为此使用去抖动器吗？您可以只使用 connectedCallBack 来获取一次性事件

class DemoElement extends HTMLElement {
  constructor() {
    super();
    this.callStack = 'constructor->';
  }
  
  connectedCallback() {
    this.callStack += 'connectedCallback';
    console.log('rendered');
    fetch(this.fakeAjax()).then((response) => {
      // can't do real ajax request here so we fake it... normally you would do 
      // something like this.innerHTML = response.text();
      // not that "rendered" get console logged before "fetch done"
      this.innerHTML = `
        <p>${this.callStack}</p>
        <p>${response.statusText}</p>
      `;
      console.log('fetch done');
    }).catch(function(err) {
      console.log(err); // Error :(
    });
  }
  
  fakeAjax() {
    return window.URL.createObjectURL(new Blob(['empty']));
  };
}
customElements.define('demo-element', DemoElement);

<demo-element></demo-element>

如果您确实需要使用观察者，您还可以在您的 connectedCallback() 中设置标志 this.isLoaded 并在您的观察者代码中检查它。