Apabila menggunakan @pinia/nuxt, meletakkan permintaan HTTP di luar setInterval akan dilaksanakan pada setiap lelaran setInterval.
P粉413704245
P粉413704245 2023-07-28 14:34:18
0
1
567
<p>Saya cuba membina pemasa menggunakan @pinia/nuxt dan nuxt 3. Apabila pemasa bermula, saya juga ingin memulakan permintaan HTTP untuk menyegerakkan pangkalan data saya. </p><p>Masalah yang saya hadapi ialah setiap kali saya memanggil tindakan permulaan, permintaan HTTP dibuat untuk setiap lelaran gelung setInterval dan saya hanya mahu menjalankannya sekali. </p><p>Ini ialah modul pinia. Saya memanggil tindakan permulaan dalam acara onClick komponen. </p> <pre class="brush:php;toolbar:false;">nyatakan: () => pemasa: { id: null, isRunning: palsu, masa: 5, pemasa: 0, negeri: null, } sebagai Pemasa, }), tindakan: { mula() { this.timer.isRunning = benar this.syncTimer() jika (!this.timer.timer) { this.timer.timer = setInterval(() => { if (this.timer.time > 0) { this.timer.time-- } lain { clearInterval(this.timer.timer) this.reset() } }, 1000) } }, berhenti() { this.timer.isRunning = palsu clearInterval(this.timer.timer) this.timer.timer = 0 }, set semula() { this.stop() this.timer.time = 1500 }, syncTimer() { backendAPI<Pemasa>('/api/timer', { kaedah: 'POST', badan: this.timer }).then(({ ralat, data }) => { jika (!error.value) { const id = data.value?.id ?? this.timer.id = id this.timer.state = "dicipta" } }) } }</pre> <p>Fail packages.json saya adalah seperti berikut:</p> <pre class="brush:php;toolbar:false;">"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" }, "kebergantungan": { "@pinia/nuxt": "^0.4.11", "pinia": "^2.1.3", "vite-plugin-vuetify": "^1.0.2" }</pre> <p><br /></p>
P粉413704245
P粉413704245

membalas semua(1)
P粉976737101

Seperti yang saya nyatakan dalam ulasan, cara yang betul untuk melaksanakan fungsi masa nyata ialah menggunakan soket. Walau bagaimanapun, jika anda perlu melakukannya dengan cara pengundian, anda boleh menulis pengawal, sama seperti contoh berikut:

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);
  },
  // ...
}

Semoga bermanfaat

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!