Typescript 在Stenciljs中每分钟调用一次函数

是否可以在Stenciljs组件中每分钟调用一个函数。 我想基本上做到这一点：

  setInterval(() => { this.checkSomeStuff() }, 60000);

---

但问题是Stenciljs无法处理它。这样设置函数是不可能的。我应该使用@Method、@Event、@Listen还是其他什么

您可以在一个组件生命周期中设置间隔，例如。G组件将加载：

---

生命周期方法的完整列表：

这可能是一个棘手的问题，但这取决于您想要实现什么

Simon Hänisch已经完美地指出，您可以使用组件的生命周期方法。componentWillLoad将启动间隔，componentDidUnload将是一个不错的选择

但请注意，Stenciljs仅在必要时渲染组件。这也意味着当模具认为不再需要它们时，它们会被移除。组件的整个代码都被删除了，这当然也会停止setInterval

当你有一个60秒的间隔时，我可以想象用户可能会滚动或做一些其他事情，可能你的组件将被卸载，当用户返回到你的组件时，间隔从零开始。这就是为什么我一开始说可能很棘手，因为在某些情况下，这种行为在某些情况下是好的

如果没有-你可能需要存储你的时间间隔，然后从它停止的地方开始。为此，一个静态变量就足够了

但也许最好的方法是使用@methoddecorator

  @Method()
  checkSomeStuff() {
    // check stuff
  }

这使组件的方法全局可用，您可以在index.html中调用它，例如：

index.html

---

这使您可以在index.html中运行SetInterval

克里斯蒂安·迈耶说得有道理。可以从组件的外部或内部对其进行更新。我强烈建议用户外方式。 我唯一可以补充的是不要忘记所有推荐的方法：

---

还考虑一种基于数据绑定的更新方式。

我要做的是刷新一个每小时过期的令牌。因此，我想检查令牌是否每分钟左右就要过期，如果剩余时间不足5分钟，请刷新令牌。因此，如果用户离开40分钟后回来，可能令牌已经过期，因为页面上没有发生任何事情，如果我使用组件生命周期，也不会触发任何事件？我用@Method尝试了您的示例，并将间隔放在index.html中。它似乎起作用了。也许不是最漂亮的解决方案，但它是有效的：它是一个很好的idé，但可能并不完全适合我的情况。我将使用它来检查令牌是否过期，所以即使页面未使用50分钟，用户可能处于休息状态，我想每分钟检查一次令牌，而这在这个解决方案中是不可能的，对吗？

  @Method()
  checkSomeStuff() {
    // check stuff
  }

<your-component id="comp"></your-component>
<script>
  document.getElementById("comp").checkSomeStuff(); // yes you can call the function in that way
</script>

import { Method } from '@stencil/core';

export class TodoList {

  @Method()
  async showPrompt() {
    // show a prompt
  }
}

(async () => {
  await customElements.whenDefined('todo-list');
  const todoListElement = document.querySelector('todo-list');
  await todoListElement.showPrompt();
})();