2

Hey guys can someone just quickly help me out here.

I have an interval for a slideshow in one function and I want to clear it from another function without using global scopes as I know it is bad practice.

Can someone kindly help here please?

function beginSlideshow() {
    var interval = setInterval(function () {
      //Slideshow content here
}

function revertSlideshow() {
    clearInterval(interval);
}
8
  • 4
    Don't make interval local to beginSlideshow()? Commented Nov 8, 2021 at 16:35
  • 1
    I've been told making it global is bad practice Commented Nov 8, 2021 at 16:36
  • Isn't that a form of global scope? Commented Nov 8, 2021 at 16:37
  • There are tightly scoped variables (like your interval here, that's available only inside one function), there are global variables (window.interval), but there are also in-between scopes. You don't have to go all white or all black Commented Nov 8, 2021 at 16:38
  • You could use a scoping function, take a look at this answer Commented Nov 8, 2021 at 16:38

1 Answer 1

6

You have to store the timer handle somewhere. :-)

You have lots of options:

Modules

You could use modules. Then a top-level declaration of interval wouldn't be a global, it would only be accessible to the module:

let interval = 0;
export function beginSlideshow() {
    interval = setInterval(function () {
        //Slideshow content here
    }, someValue);
}

export function revertSlideshow() {
    clearInterval(interval);
    interval = 0;
}

In a closure's scope

Similar concept to the module above, but without using modules:

const { beginSlideshow, revertSlideshow } = (() => {
    let interval = 0;
    function beginSlideshow() {
        interval = setInterval(function () {
            //Slideshow content here
        }, someValue);
    }

    function revertSlideshow() {
        clearInterval(interval);
        interval = 0;
    }

    return { beginSlideshow, revertSlideshow };
})());

In the caller's scope

You could make this the problem of the person calling beginSlideshow by returning the function to stop it:

function beginSlideshow() {
    const interval = setInterval(function () {
        //Slideshow content here
    }, someValue);
    return () => {
        clearInterval(interval);
    };
}

The caller would use that like this:

const revertSlideshow = beginSlideShow();
// ...
revertSlideshow();

Another way to store it in the caller's scope is to wrap this up in a class and have the handle be a data property:

class Slideshow {
    interval = 0;

    begin() {
        this.interval = setInterval(/*...*/);
    }

    revert() { // I'd call it "end"
        clearInterval(this.interval);
        this.interval = 0;
    }
}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.