From 1481678dacc6c4ee47eff9367c5b2c98d3c55021 Mon Sep 17 00:00:00 2001
From: jgerstbe <jannikanni.jg@gmail.com>
Date: Mon, 20 Jul 2020 12:29:20 +0200
Subject: [PATCH] [U] user setInterval instead of setTimeout

---
 public/app.js | 39 ++++++++++++++++++++-------------------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/public/app.js b/public/app.js
index 9c67d2c..831f093 100644
--- a/public/app.js
+++ b/public/app.js
@@ -3,52 +3,53 @@ new Vue({
   data: {
     files: [],
     index: 0,
-    timeout: null,
-    carouselTimeout: 10000,
+    interval: null,
+    carouselTimeout: 100,
     carouselActive: true
   },
   methods: {
     next: function () {
-      this.carouselActive = true;
-      clearTimeout(this.timeout);
-      this.timeout = setTimeout(() => this.carousel(), this.carouselTimeout*2);
       if (this.index + 1 < this.files.length) {
         this.index++;
       } else {
         this.index = 0;
       }
+      if (!this.carouselActive) {
+        this.startCarousel();
+      }
     },
     prev: function () {
-      this.carouselActive = true;
-      clearTimeout(this.timeout);
-      this.timeout = setTimeout(() => this.carousel(), this.carouselTimeout*2);
       if (this.index - 1 >= 0) {
         this.index--;
       } else {
         this.index = this.files.length - 1;
       }
-    },
-    carousel: function (time = this.carouselTimeout) {
-      this.timeout = setTimeout(() => {
-        this.next();
-        this.carousel();
-      }, time);
+      if (!this.carouselActive) {
+        this.startCarousel();
+      }
     },
     loadData: function () {
       fetch('api/files').then(response => response.json()).then(
         data => {
           this.files = data.resource;
-          this.carousel();
+          this.startCarousel();
         }
       )
     },
+    startCarousel: function (time = this.carouselTimeout) { 
+      this.carouselActive = true;     
+      clearInterval(this.interval);
+      this.interval = setInterval(this.next, time);
+    },
+    stopCarousel: function () {      
+      this.carouselActive = false;
+      clearInterval(this.interval);
+    },
     toggleCarousel: function () {
-      clearTimeout(this.timeout);
       if (this.carouselActive) {
-        this.carouselActive = false;
+        this.stopCarousel();
       } else {
-        this.carouselActive = true;
-        this.carousel();
+        this.startCarousel();
       }
     }
   },