时间戳

首页 > 解决方案 > 在 Stenciljs 中每分钟调用一次函数

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

问题描述

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

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

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

标签： typescriptsetintervalstenciljs

解决方案

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

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

但请注意，Stenciljs 仅在必要时才会呈现您的组件。这也意味着当 Stencil “认为”不再需要它们时，它们会被删除。你的组件的整个代码就像被删除了，这当然也会停止你的 setInterval。

当您有 60 秒的间隔时，我可以想象用户可能会滚动或执行一些其他可能会卸载您的组件的操作，并且当用户返回到您的组件时，间隔再次从零开始。（这就是为什么我一开始说的可能很棘手，因为在某些情况下这种行为是好的，有些则不是）。

如果没有 - 您可能需要存储您的间隔，而不是从它停止的地方开始。为此，静态变量可能就足够了。

但也许最好的方法是使用@Method装饰器。

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

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

索引.html

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

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

推荐阅读