Zulko/eagle.js

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

Open

#52 aberto em 28 de mai. de 2018

Ver no 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?

Guia do colaborador

Pilha de tecnologia
javascriptvue
Domain
frontend
Tipo Issue
feature
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-3 hours
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
stale
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
clear
Prerequisites
Vue.jsJavaScriptVue lifecycle hooks
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
60
Direção de pesquisa
Explore the eagle.js source code, particularly the main slide component (likely VueSlide.vue) and the timer logic in the mounted hook. The issue proposes adding a slideData option for per slide durations. Consider modifying the interval logic to clear and reset when the slide changes, using the new duration from the slide's data. Check if there are existing slide options like 'steps' that can be extended. Look at the current implementation of nextStep and nextSlide methods to understand how to integrate a timer change.