Disable function after onclick

Question

I have a function that automatically loads when the pages opens. I want the function to stop running after "onclick". I want the slideshow to stop running automatically after clicking a button.

<html>
   <head>
      <script type="text/javascript">
         function changeImage(x){
             imageNumber += x;

             if(imageNumber > imageLength){
                 imageNumber = 0;
             }

             if(imageNumber < 0){
                 imageNumber = imageLength;
             }

             document.getElementById("slideshow").src = images[imageNumber];
             document.getElementById("caption").innerHTML = caption[imageNumber];

             return false;
         }

         function autoRun(){
            //This function simply makes the slideshow change slides every 5 seconds.
            setInterval("changeImage(1)", 5000);
         }

         function clearFunction(){
            //This function needs to stop the autoRun function. 
            //If the user wants to manual flip through the slides, 
            //I don't want the slides to continue changing automatically
         }
      </script>
   </head>
   <body onload="autoRun()">

      <a href="#" onclick="changeImage(-1); clearFunction();">Previous Slide</a>

      <a href="#" onclick="changeImage(1); clearFunction();">Next Slide</a>

   </body>
</html>

You can create a global variable. For example: var checkRun = true; You can check this variable in the function and set it to false in the first run. — Remco K., May 16 '17 at 19:12
Well the autoRun() must be doing setInterval of some kind. You need to maintain a reference to it outside autoRun() and use clearInterval in your clearFunction(). Please post the content of autoRun() — vabii, May 16 '17 at 19:13

score 1 · Accepted Answer · answered May 16 '17 at 19:19

Intervals can be cleared:

var interval;
function autoRun(){
        //This function simply makes the slideshow change slides every 5 seconds.
        interval=setInterval(changeImage, 5000,1);
}
function clearFunction(){
        if(interval) clearInterval(interval);
}

score 0 · Answer 2 · answered May 16 '17 at 19:14

You can put all the code in autoRun() inside an if(flag) with flag being a boolean that is initially set to true and then you can set flag=false inside clearFunction(), so whenever clearFunction() is called, flag is set to false and the code inside autorun() won't execute because it won't pass the if(flag) check.

Note that flag needs to be a global variable.

glhrmv · Answer 3 · 2017-05-16T19:22:41.503

0

You can make a window interval that calls autoRun every 5000 milliseconds.

// anywhere in your script, outside of any function
let timer = window.setInterval(changeImage, 5000);

In the clearFunction function, just do

window.clearInterval(timer);

See window.setInterval.

edited May 16 '17 at 19:22

answered May 16 '17 at 19:19

glhrmv

1,712
1
16
23

vabii · Answer 4 · 2017-05-16T19:29:12.280

0

You need to use clearInterval

var interval = 1;         
    function autoRun(){
                //This function simply makes the slideshow change slides every 5 seconds.
        interval = setInterval(changeImage, 5000, 1);
    }

    function clearFunction(){
        clearInterval(interval);
    }

edited May 16 '17 at 19:29

answered May 16 '17 at 19:22

vabii

521
6
16

Disable function after onclick

4 Answers4