如何使用观察者聚合物来审问

Question

我尝试在Web组件完成加载时尝试一次运行getResponse。但是，当我尝试运行此操作时，debounce函数仅充当异步延迟，并在5000 ms之后运行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并在观察者代码中检查该标志。