Zulko/eagle.js

Feature request `slideData`: Reuse setInterval for individual slide durations

Open

#52 opened on May 28, 2018

View on GitHub
 (11 comments) (0 reactions) (0 assignees)JavaScript (4,074 stars) (235 forks)batch import
enhancementhelp wanted

Description

Hey there,

I'm currently trying to implement a feature which allows me to have different durations for different slides. For instance: I want one slide to be displayed 10 seconds and one slide to be displayed 5 seconds.

     setInterval(() => {
      this.nextStep();
    }, 5000); //or use a timer variable

I'm currently using the setInterval method on my mounted function. Furthermore I have overwritten the nextStep function in order to check which slide is currently displayed and to adapt the duration of the slide.

   nextStep() {
      this.slides.forEach(function(slide) {
        slide.direction = "next";
      });
      this.$root.direction = "next";
      const self = this;
      this.$nextTick(function() {
        if (self.step >= self.currentSlide.steps) {
          self.nextSlide();
        } else {
          self.step++;
        }
      });
      //adapt timer variable regarding of corresponding slide duration

However I figured out that I have to reuse setInterval() after I adapted the duration (which is obvious because it's only called in the mount method once). This leads to weird effects though. Could you give me a hint how to achieve different durations for different slides?

EDIT:

It looks like I just forgot to call clearInterval. How ever is there an easier option to achieve that?

Contributor guide