diff --git a/nginx/vue/src/components/home/Collage.vue b/nginx/vue/src/components/home/Collage.vue index 82e9bc5..1870df4 100644 --- a/nginx/vue/src/components/home/Collage.vue +++ b/nginx/vue/src/components/home/Collage.vue @@ -14,22 +14,24 @@ const currentIndex = ref(0); const currentComment = computed(() => images[currentIndex.value].comment); const currentUrl = computed(() => images[currentIndex.value].url); +let nextId; + function nextImage() { + clearTimeout(nextId); let newIndex; do { newIndex = Math.floor(Math.random() * images.length); - } while (newIndex === currentIndex.value); // prevent same image repeating + } while (newIndex === currentIndex.value); currentIndex.value = newIndex; + nextId = setTimeout(nextImage, 10000); } -let intervalId; - onMounted(() => { - intervalId = setInterval(nextImage, 10000); + nextId = setTimeout(nextImage, 10000); }); onUnmounted(() => { - clearInterval(intervalId); + clearTimeout(nextId); }); diff --git a/nginx/vue/src/components/home/Listening.vue b/nginx/vue/src/components/home/Listening.vue index 1bbc8c7..bdcab4c 100644 --- a/nginx/vue/src/components/home/Listening.vue +++ b/nginx/vue/src/components/home/Listening.vue @@ -2,7 +2,7 @@ import { ref, computed, onMounted, onUnmounted } from "vue"; import axios from "axios"; -let intervalId = null; +let nextId = null; let refreshId = null; const song = computed(() => songs.value[idx.value]); @@ -31,22 +31,25 @@ async function fetchRecent() { } catch (err) { console.error("Cannot connect to Spotify API", err); } + refreshId = setTimeout(fetchRecent, 120000); } function nextSong() { + clearTimeout(nextId); if (!songs.value.length) return; idx.value = (idx.value + 1) % songs.value.length; + nextId = setTimeout(nextSong, 5000); } onMounted(async () => { await fetchRecent(); - intervalId = setInterval(nextSong, 5000); - refreshId = setInterval(fetchRecent, 120000); + nextId = setTimeout(nextSong, 5000); + refreshId = setTimeout(fetchRecent, 120000); }); onUnmounted(() => { - clearInterval(intervalId); - clearInterval(refreshId); + clearTimeout(nextId); + clearTimeout(refreshId); });