![\"\"](\"\/wp-content\/uploads\/2022\/02\/timer_1.png\")
<\/p>\nTimer starten und stoppen in React-Komponenten.<\/p>\n
<\/p>\n
Ich hatte in einem Projekt Bedarf an einem Timer, welcher regelm\u00e4\u00dfig etwas aktualisiert. Dabei hatte ich ein kleines Problem, meine Beispielanwendung:<\/p>\n
<\/p>\n
Den Timer startete ich naiverweise einfach in der Komponente:<\/p>\n
![\"\"](\"\/wp-content\/uploads\/2022\/02\/timer_2.png\")
<\/p>\n
React ist allerdings recht klug und l\u00e4dt und aktualisiert die Komponenten im Hintergrund, was bedeutete, dass dieser Code immer wieder ausgef\u00fchrt worden ist, wenn man zwischen den Tabs wechselt. In dessen Folge wurden immer wieder neue Timer-Events registriert.<\/p>\n
![\"\"](\"\/wp-content\/uploads\/2022\/02\/timer_3.png\")
<\/p>\n
Meine L\u00f6sung war die Komponente in eine React-Komponente umzubauen. Diese bringt dann Dinge wie „componentDidMount()“ und „componentWillUnmount()“ mit. Diese Events werden ausgef\u00fchrt, wenn die Komponente angezeigt wird und auch, wenn diese wieder verschwindet. <\/p>\n
\r\nimport * as React from 'react';\r\n \r\nclass Clock extends React.Component<any, any> {\r\n private timerId: any;\r\n \r\n constructor(props: any) {\r\n super(props);\r\n this.state = { currentTime : "-" };\r\n }\r\n \r\n componentDidMount() {\r\n console.log("Starting timer 1");\r\n this.timerId = setInterval(this.updateStatus, 1000);\r\n }\r\n \r\n componentWillUnmount() {\r\n console.log("Stopping timer 2");\r\n clearInterval(this.timerId);\r\n }\r\n \r\n updateStatus = () => {\r\n console.log("Timer 1 fired");\r\n let currentdate = new Date();\r\n let datetime = "Last Sync: " + currentdate.getDate() + "\/"\r\n + (currentdate.getMonth()+1) + "\/"\r\n + currentdate.getFullYear() + " @ "\r\n + currentdate.getHours() + ":"\r\n + currentdate.getMinutes() + ":"\r\n + currentdate.getSeconds();\r\n \r\n this.setState({ currentTime: datetime});\r\n }\r\n \r\n render() {\r\n return <div>\r\n <p>{this.state.currentTime}<\/p>\r\n <\/div>\r\n };\r\n}\r\n \r\nexport default Clock;\r\n<\/pre>\nDies erlaubt es, die Referenz auf den Timer, die ID, zu speichern und den Timer beim Ausblenden mit „clearInterval“ wieder zu entfernen.<\/p>\n
![\"\"](\"\/wp-content\/uploads\/2022\/02\/timer_4.png\")
<\/p>\n
Fertig! Der Timer wird nun gestartet und wieder gestoppt, sodass dieser nur einmal aktiv ist.<\/p>\n
![\"\"](\"\/wp-content\/uploads\/2022\/02\/timer_5.png\")
<\/p>\n