Вызов функции каждую минуту в Stenciljs - PullRequest
Новая
       3

Вызов функции каждую минуту в Stenciljs

0 голосов
/ 09 января 2020

Можно ли вызывать функцию каждую минуту в компоненте js Трафарета. Я хочу в основном сделать это: 

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

Но проблема в том, что трафарет js не может справиться с этим. Невозможно просто установить функцию таким образом. Должен ли я использовать @Method, @Event, @Listen или что-то еще?

Ответы [ 2 ]

1 голос
/ 09 января 2020

Это может быть непростая проблема, но это зависит от того, чего вы хотите достичь.

Саймон Хениш уже прекрасно отметил, что вы можете использовать Методы жизненного цикла компонента. componentWillLoad для запуска интервала и componentDidUnload будет хорошим выбором.

Но обратите внимание, что Stencil js отображает ваши компоненты только при необходимости. Это также означает, что они удаляются, когда Трафарет «думает», что они больше не нужны. Чем весь код вашего компонента похож на удаленный, что также, конечно, останавливает ваш setInterval.

Когда у вас есть интервал в 60 секунд, я могу представить, что пользователь может прокручивать или делать другие вещи, которые могут сделать ваш компонент быть выгруженным, и когда пользователь возвращается к вашему компоненту, интервал начинается снова с нуля. (Вот почему я сказал в начале может быть хитрым , потому что в некоторых случаях это поведение хорошо в некоторых нет).

Если нет - вам, возможно, нужно сохранить свой интервал и затем начинать с того, где это остановилось. Для этого может быть достаточно переменной stati c.

Но, возможно, лучшим подходом может быть использование декоратора @ Method . 

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

This делает метод вашего компонента глобальным, и вы можете вызывать его в своем индексе. html например, вот так:

index. html

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

Это дает вам возможность запустить SetInterval в индексе. html.

0 голосов
/ 09 января 2020

Вы можете установить интервал в одном из жизненных циклов компонента, например, componentWillLoad: 

@Component({ tag: 'my-comp' })
export class MyComp {
  interval: any;

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

  componentDidUnload() {
    clearInterval(this.interval);
  }

  checkSomeStuff() {
    // ...
  }

  render() {
    return <Host />;
  }
}

Полный список методов жизненного цикла: https://stenciljs.com/docs/component-lifecycle

...