Bei Verwendung von @pinia/nuxt wird das Platzieren der HTTP-Anfrage außerhalb von setInterval bei jeder setInterval-Iteration ausgeführt.
Linda Hamilton
Linda Hamilton 2023-07-28 14:34:18
0
1
488

Ich versuche, einen Timer mit @pinia/nuxt und nuxt 3 zu erstellen. Wenn der Timer startet, möchte ich auch eine HTTP-Anfrage initiieren, um meine Datenbank zu synchronisieren.

Das Problem, mit dem ich konfrontiert bin, ist, dass jedes Mal, wenn ich die Startaktion aufrufe, eine HTTP-Anfrage für jede Iteration der setInterval-Schleife gestellt wird und ich sie nur einmal ausführen möchte.

Dies ist das Pinia-Modul. Ich rufe die Startaktion im onClick-Ereignis der Komponente auf.

state: () => Timer: { ID: null, isRunning: false, Zeit: 5, Timer: 0, Zustand: null, } als Timer, }), Aktionen: { Start() { this.timer.isRunning = true this.syncTimer() if (!this.timer.timer) { this.timer.timer = setInterval(() => { if (this.timer.time > 0) { this.timer.time-- } anders { clearInterval(this.timer.timer) this.reset() } }, 1000) } }, stoppen() { this.timer.isRunning = false clearInterval(this.timer.timer) this.timer.timer = 0 }, zurücksetzen() { this.stop() this.timer.time = 1500 }, syncTimer() { backendAPI('/api/timer', { Methode: 'POST', Körper: this.timer }).then(({ Fehler, Daten }) => { if (!error.value) { const id = data.value?.id ?? this.timer.id = id this.timer.state = "erstellt" } }) } }

Meine Datei packets.json lautet wie folgt:

"devDependencies": { „@fortawesome/fontawesome-free“: „^6.4.0“, „@fullcalendar/core“: „^6.1.8“, "@fullcalendar/daygrid": "^6.1.8", „@fullcalendar/interaction“: „^6.1.8“, „@fullcalendar/timegrid“: „^6.1.8“, „@fullcalendar/vue3“: „^6.1.8“, „@iconify/vue“: „^4.1.1“, „@kevinmarrec/nuxt-pwa“: „^0.17.0“, "@mdi/font": "^7.2.96", „@nuxtjs/google-fonts“: „^3.0.0“, „@pinia-plugin-persistedstate/nuxt“: „^1.1.1“, „nuxt“: „3.4.2“, "sass": "^1.62.0", „vuetify“: „^3.1.15“ }, "Abhängigkeiten": { „@pinia/nuxt“: „^0.4.11“, "pinia": "^2.1.3", „vite-plugin-vuetify“: „^1.0.2“ }


Linda Hamilton
Linda Hamilton

Antworte allen (1)
P粉976737101

正如我在评论中提到的,实现实时功能的正确方式是使用sockets。但是,如果你需要以轮询的方式进行操作,你可以编写一个守卫,类似于以下示例:

actions: { start() { if (this.timer.isRunning) return; this.timer.isRunning = true; this.syncTimer(); this.timer.timer = setInterval(() => { if (this.timer.time > 0) { this.timer.time--; } else { clearInterval(this.timer.timer); this.reset(); } }, 1000); }, // ... }

希望有用

    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!