Having trouble clearing the interval after setting it?

Question

Having trouble clearing the interval after setting it?

I developed a slideshow script called function slide(). The intention is for this function to begin when the 'play' button is clicked and pause when the 'pause' button is clicked. I implemented setinterval and it functions properly, however, clearinterval does not seem to be working as expected. Can you pinpoint what mistake I might be making here?

<div id='play' onclick='play()'><img src='image1/fleche.png'></div>
<div id='pause' onclick='stop()'><img src='image1/break.png'></div>

function play(){
    var test = setInterval(slide,500);}
function stop(){
    clearInterval(test);}

javascript slideshow setinterval clearinterval

Answer 1

Answer №1

Here's a great example of how to implement the Revealing module pattern:

var mySlideShow = (function () {
    var intervalHolder;

    //this function is only accessible within the closure
    var slide = function(){
          //what happens in each slide?
    }

    function play(){
      intervalHolder = setInterval(slide, 500);
    }

    function stop(){
           clearInterval(intervalHolder);
     }

    return{
      play: play,
      stop: stop
    };
})();

To use it, just do this:

<div id='play' onclick='mySlideShow.play()'><img src='image1/fleche.png'></div>
<div id='pause' onclick='mySlideShow.stop()'><img src='image1/break.png'></div>

Some advantages of this approach include:

Avoids cluttering the global scope with variables
The Revealing Module Pattern ensures consistent syntax in our scripts and makes it clear which functions and variables can be accessed publicly at the end of the module, enhancing readability.

Answer 2

Here's a great example of how to implement the Revealing module pattern:

var mySlideShow = (function () {
    var intervalHolder;

    //this function is only accessible within the closure
    var slide = function(){
          //what happens in each slide?
    }

    function play(){
      intervalHolder = setInterval(slide, 500);
    }

    function stop(){
           clearInterval(intervalHolder);
     }

    return{
      play: play,
      stop: stop
    };
})();

To use it, just do this:

<div id='play' onclick='mySlideShow.play()'><img src='image1/fleche.png'></div>
<div id='pause' onclick='mySlideShow.stop()'><img src='image1/break.png'></div>

Some advantages of this approach include:

Avoids cluttering the global scope with variables
The Revealing Module Pattern ensures consistent syntax in our scripts and makes it clear which functions and variables can be accessed publicly at the end of the module, enhancing readability.

Answer 3

Answer №2

The reason why the code is not functioning properly is because the variable "test" is not defined within the stop function. To correct this, you can declare the "test" variable as global scope by modifying your code like so:

var test = null;

function start(){
    test = setInterval(slide, 500);
}
function end(){
    clearInterval(test);
}

Answer 4

The reason why the code is not functioning properly is because the variable "test" is not defined within the stop function. To correct this, you can declare the "test" variable as global scope by modifying your code like so:

var test = null;

function start(){
    test = setInterval(slide, 500);
}
function end(){
    clearInterval(test);
}

Answer 5

Answer №3

The issue you are facing is due to the fact that the variable test is declared within the function play(), making it only accessible within that function scope. To solve this, you need to declare it outside of the function:

var test;
function play(){
    test = setInterval(function(){
console.log("hello")
},500);
}
function stop(){
    clearInterval(test);
}

<button onclick="play()">play</button>
<button onclick="stop()">stop</button>

Answer 6

The issue you are facing is due to the fact that the variable test is declared within the function play(), making it only accessible within that function scope. To solve this, you need to declare it outside of the function:

var test;
function play(){
    test = setInterval(function(){
console.log("hello")
},500);
}
function stop(){
    clearInterval(test);
}

<button onclick="play()">play</button>
<button onclick="stop()">stop</button>

Having trouble clearing the interval after setting it?

Answer №1

Answer №2

Answer №3

Similar questions

What is the speed difference between calling functions from require's cache in Node.js and functions in the global scope?

What is the best way to describe duplicate keys within a JSON array?

Server Sent Events not being received by client from Express.js server

Guide to implementing a variable delay or sleep function in JQuery within a for loop

Slideshow: I hope the Radio Button triggers the appearance of the next item in the rotation

How can you determine if a mouseover event is triggered by a touch on a touchscreen device?

The issue of the highlighted row not disappearing persists even after clicking on the adjacent table row

Having some success with AngularJs autocomplete feature

When attempting to import and utilize global state in a component, the error message "Cannot iterate over null object"

How can I sort by the complete timestamp when using the Antd table for dates?

The characteristics of angular js Service/Factory and how they influence functionality

Experiencing a problem with my JavaScript code in Node.js due to an asynchronous issue arising when using a timeout

Harness the power of React Material-UI with pure javascript styling

Leveraging the Wikia API

Display a custom AngularJS directive on content loaded through $http request

Issue with Mongoose: Create operations are not functioning properly right after performing Delete operations

Puppeteer is unable to detect the node.js handlebars helpers

Parsing nested JSON files to present data on a webpage

Vue event emissions are not triggered or detected

JavaScript loop through an array of objects