在本步骤结束时，显示的单词将每秒自动切换一次。

这可以通过使用 setInterval 来实现，这是一个浏览器函数，会在每次调用之间以固定的时间间隔重复调用一个函数。

定义一个绑定到组件的 tickToNextWord 方法，它将递增 this.idx。

// word-viewer.ts

  render() {
    ...
  }

  tickToNextWord = () => { this.idx += 1; };

// word-viewer.js

  render() {
    ...
  }

  tickToNextWord = () => { this.idx += 1; };

调用此方法会递增我们的响应式内部状态 idx，从而调度一次更新。

由于你将把这个方法与 setInterval 一起使用，可以使用箭头函数来确保 this 指向组件。更多信息请参阅 "this" 问题。

要设置定时器和清理定时器，请使用标准自定义元素生命周期回调 connectedCallback 和 disconnectedCallback。

connectedCallback 在组件被添加到 DOM 时调用，disconnectedCallback 在组件从 DOM 中移除时调用。

// word-viewer.ts

  private intervalTimer?: number;

  connectedCallback() {
    super.connectedCallback();
    this.intervalTimer = setInterval(this.tickToNextWord, 1000);
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    clearInterval(this.intervalTimer);
    this.intervalTimer = undefined;
  }

// word-viewer.js

  intervalTimer;

  connectedCallback() {
    super.connectedCallback();
    this.intervalTimer = setInterval(this.tickToNextWord, 1000);
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    clearInterval(this.intervalTimer);
    this.intervalTimer = undefined;
  }

当 word-viewer 被添加到 DOM 时，connectedCallback 被调用，setInterval 每 1000 毫秒（即每秒）重复调用 this.tickToNextWord。

定时器 ID 存储在 this.intervalTimer 上，它不需要是响应式的。

当 word-viewer 从 DOM 中移除时，disconnectedCallback 被调用来清理定时器，this.tickToNextWord 将不再被调用。

预览应该在循环显示各个单词。

Lit 利用了标准的自定义元素生命周期回调。

如果你自定义了任何标准的自定义元素生命周期方法，请确保调用 super 的实现，以保留 Lit 的标准功能。更多信息请参阅生命周期文档。