Question

我正在使用HTMLElement创建自定义的“计数器”组件

这是此组件的HTML：

>>> (idx[-1] - idx[0]) / np.timedelta64(1, 'Y')
4.019247486259129

和Counter.js代码：

<template id="counter-template">
  <div class='counter__wrapper'>
    <h2 id='counter__status'></h2>
    <button id='continue'>Continue</button>
    <button id='stop'>Stop</button>
  </div>
</template>
<script src="Counter.js"></script>

该组件运行良好，但是我在setInterval函数中使用了该组件，在该函数中，我将'count'属性设置为间隔的迭代器，如下所示：

const currentDocument = document.currentScript.ownerDocument;

class CustomCounter extends HTMLElement {
  constructor() {
    super();

    this.count = 0;
    this.enableCount = true;
  }

  static get observedAttributes() { 
    return ["count"]; 
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (this.enableCount) {
      this.count = newValue;
      this.shadowRoot.querySelector('#counter__status').innerHTML = this.count;
    }
  }


  connectedCallback() {
    const shadowRoot = this.attachShadow({mode: 'open'});
    const template = currentDocument.querySelector('#counter-template');
    const instance = template.content.cloneNode(true);
    shadowRoot.appendChild(instance);

    this.setAttribute('count', this.count);
    this.shadowRoot.querySelector('#stop').addEventListener('click', function() {
      this.enableCount = false;
    })
  }

}

customElements.define('custom-counter', CustomCounter);

并且工作正常，'count'属性正在更改并显示在html中。

现在，问题是当我单击“停止”按钮时我需要停止计数器，并且如您所见，我在connectedCallback（）中添加了一个单击侦听器，它将设置this.enableCount的值。为假，

，尽管在更新attributeChangedCallback（）中的html之前有if语句检查this.enableCount

  var counter = document.querySelector('custom-counter');
  var i = 1;
  var completedAt = 10;

  var interval = setInterval(() => {
    counter.setAttribute('count', i);
    if (i == completedAt) {
      clearInterval(interval);
    }
    i++;
}, 1000);

单击停止按钮时，计数不会停止。（如果我用console.log记录this.enableCount的值，那将是假的，但计数不会停止更新）

Answer 1

您遇到dtype问题。

在您的匿名点击处理程序函数内部

this

this.shadowRoot.querySelector('#stop').addEventListener('click', function() { this.enableCount = false; })不是您的Web组件，而是被单击的按钮。您可以通过三种方式解决该问题：

a）使用本身没有this的箭头功能：

this

b）通过使用this.shadowRoot.querySelector('#stop').addEventListener('click', () => { this.enableCount = false; })明确声明处理函数中的this：

Function.prototype.bind()

c）使用闭包并定义正确范围的变量，该变量包含对this.shadowRoot.querySelector('#stop').addEventListener('click', function() { this.enableCount = false; }.bind(this))的引用：

this

Javascript自定义HTMLElement问题

1 个答案: