jgerstbe/webframe
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

[U] user setInterval instead of setTimeout

Browse source
This commit is contained in:
Jan 2020-07-20 12:29:20 +02:00
parent 9f5ae210f1
commit 1481678dac
1 changed files with 20 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
public/app.js
View file

@ -3,52 +3,53 @@ new Vue({
data: { data: {
files: [], files: [],
index: 0, index: 0,
timeout: null, interval: null,
carouselTimeout: 10000, carouselTimeout: 100,
carouselActive: true carouselActive: true
}, },
methods: { methods: {
next: function () { next: function () {
this.carouselActive = true;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => this.carousel(), this.carouselTimeout*2);
if (this.index + 1 < this.files.length) { if (this.index + 1 < this.files.length) {
this.index++; this.index++;
} else { } else {
this.index = 0; this.index = 0;
} }
if (!this.carouselActive) {
this.startCarousel();
}
}, },
prev: function () { prev: function () {
this.carouselActive = true;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => this.carousel(), this.carouselTimeout*2);
if (this.index - 1 >= 0) { if (this.index - 1 >= 0) {
this.index--; this.index--;
} else { } else {
this.index = this.files.length - 1; this.index = this.files.length - 1;
} }
}, if (!this.carouselActive) {
carousel: function (time = this.carouselTimeout) { this.startCarousel();
this.timeout = setTimeout(() => { }
this.next();
this.carousel();
}, time);
}, },
loadData: function () { loadData: function () {
fetch('api/files').then(response => response.json()).then( fetch('api/files').then(response => response.json()).then(
data => { data => {
this.files = data.resource; 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 () { toggleCarousel: function () {
clearTimeout(this.timeout);
if (this.carouselActive) { if (this.carouselActive) {
this.carouselActive = false; this.stopCarousel();
} else { } else {
this.carouselActive = true; this.startCarousel();
this.carousel();
} }
} }
}, },