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

43
public/app.js
View file

@ -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();
}
)
},
toggleCarousel: function () {
clearTimeout(this.timeout);
if (this.carouselActive) {
this.carouselActive = false;
} else {
startCarousel: function (time = this.carouselTimeout) {
this.carouselActive = true;
this.carousel();
clearInterval(this.interval);
this.interval = setInterval(this.next, time);
},
stopCarousel: function () {
this.carouselActive = false;
clearInterval(this.interval);
},
toggleCarousel: function () {
if (this.carouselActive) {
this.stopCarousel();
} else {
this.startCarousel();
}
}
},