What is the best way to cancel an interval within an immutable object?

Question

What is the best way to cancel an interval within an immutable object?

I'm currently attempting to clear the interval within the slide.autoplay function in this particular JavaScript snippet.

I would like to incorporate another function into my constant, such as a slide.stop function.

slide = {
    init: () => {
        eraser.content()
        slide.autoplay()
    },
    next: () => {
        eraser.start()
        currentSlide < 1 ? currentSlide++ : currentSlide = 0
        eraser.content()
        eraser.end()
    },
    autoplay: () => setInterval(slide.next, 5000)
}

addEventListener( 'DOMContentLoaded', slide.init )
addEventListener( 'click', slide.stop )

By the way, I have been using functions within constants for some time now and find it suitable. However, I am unsure if it is considered good practice. What are your thoughts on this?

javascript oop ecmascript-6

Answer 1

Answer №1

In order to successfully reset the interval, you must ensure it has been saved first:

slideshow = {
  timer: null,
  initialize: () => {
    canvas.display()
    slideshow.startAutoPlay()
  },
  moveForward: () => {
    canvas.begin()
    currentSlide < totalSlides ? currentSlide++ : currentSlide = 1
    canvas.display()
    canvas.complete()
  },
  startAutoPlay() {
    this.timer = setInterval(slideshow.moveForward, 4000)
  },

  pause() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}

Answer 2

In order to successfully reset the interval, you must ensure it has been saved first:

slideshow = {
  timer: null,
  initialize: () => {
    canvas.display()
    slideshow.startAutoPlay()
  },
  moveForward: () => {
    canvas.begin()
    currentSlide < totalSlides ? currentSlide++ : currentSlide = 1
    canvas.display()
    canvas.complete()
  },
  startAutoPlay() {
    this.timer = setInterval(slideshow.moveForward, 4000)
  },

  pause() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}

Answer 3

Answer №2

One way to manage timing in JavaScript is by storing the id that is returned by the `setInterval` function.

const slideshow = {
    intervalId: null,
    play() {
        this.intervalId = setInterval(this.next, 1000);
    },
    next() {
        console.log("Moving to the next slide");
    },
    stop() {
        clearInterval(this.intervalId);
    }
};

Answer 4

One way to manage timing in JavaScript is by storing the id that is returned by the `setInterval` function.

const slideshow = {
    intervalId: null,
    play() {
        this.intervalId = setInterval(this.next, 1000);
    },
    next() {
        console.log("Moving to the next slide");
    },
    stop() {
        clearInterval(this.intervalId);
    }
};

What is the best way to cancel an interval within an immutable object?

Answer №1

Answer №2

Similar questions

In JavaScript, alert a message once all images have been clicked

Protractor map function fails to provide a defined output

What is the best way to save request URLs in JavaScript while following the DRY principle?

Display a dynamic animation once the user switches to the tab

Is it advisable to utilize jQuery's parseJSON/getJSON functions?

KeyBy lodash method stores values in an object using the specified property as keys

The functionality of the Google API JavaScript client is sporadic, intermittently working and occasionally

What could be causing Express.js to return two responses from the server?

Iterating through elements to set the width of a container

Using express version 4.x to send an empty JSON object

Verify whether the element in the DOM is a checkbox

How can I make sure addEventListener only responds to numbers and not images?

What is the best way to generate a loop that builds a full deck containing all 52 cards?

submit the JSON formatted data to the server

Is there a way to alter the text color using JavaScript on the client side?

Obtain the identification numbers from the row within the table

Javascript Rest for y moments

The circles seem to be elusive, refusing to make an appearance on the forefront of the HTML webpage

Styling with CSS to position a div tag on top of a webpage

Tips for obtaining the top 3 highest-value objects in a JavaScript array over all other elements