Function to stop a setInterval call leaving the width style static

Question

The code below (found here) shows a kind of progress bar that moves very fast towards the right side re-starting non stop. This is done by changing the element's width within a setInterval.

How can I build a function that freezes the progress bar motion when called (stops the width from changing freezing it in the moment the function is called)?

I'm working with prototype/javascript (the jQuery line in the code is a fast way to add a class in order to publish this post, but I'm not using jQuery).

   <style>

    .thepower {
      opacity: 0;
        background-color: #191919;
      padding: 4px;
      position: absolute;
      overflow: hidden;
      width: 300px;
      height: 24px;
      top:150px;
      left:84px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
      -webkit-box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
      box-shadow: inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
    }

    .visible.thepower {
      opacity: 1;
    }

    .thepower .inner {  
      background: #999;
      display: block;
      position: absolute;
      overflow: hidden;
      max-width: 97.5% !important; 
      height: 24px;
      text-indent: -9999px;
      -webkit-border-radius: 12px;
      border-radius: 12px;
      -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 3px rgba(0, 0, 0, 0.4),
        0 1px 1px #000;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 
       inset 0 -1px 3px rgba(0, 0, 0, 0.4), 
       0 1px 1px #000;

    }

    .green .inner { 
      background: #7EBD01;
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7EBD01), to(#568201));

    }

    </style>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>
    // How it works:
/*
    var counter = 0 (inside a function, window.onload) - A local variable is defined and initialised at zero.
    window.setInterval(function(){ ... }, 50) - An interval is defined, activating the function (first argument) every 50 milliseconds (20x a second, adjust to your own wishes)
    (++counter % 101) - Increments the counter by one, modulo 101:
    The modulo operator calculates the remainder after division, ie: 0 % 101 = 0, 100 % 101 = 100 and 200 % 101 = 99, 201 % 101 = 100, 202 % 101 = 100
    */



    window.onload = function(){   

        var counter = 0;
        window.setInterval(function(){
              $(".green").addClass("visible")   ;
           document.querySelector('.green.thepower.visible .inner').style.width =    (++counter % 101) + '%';                                          

        }, 10);


    }
    </script>


    <div id="thepower" ad-outlet="thepower">
    <div class="green thepower"><div  class="inner"></div></div>
    </div>

Answer 1

Here's a way to stop and continue from where you left off:

Add this to your HTML:

<button id="toggleProgress">Click</button>

and change your javascript to this:

var counter = 0;
var timer = null;
function progressBar(){
    if (timer) {
        clearTimeout(timer);
        timer = null;
        return;
    }
    timer = window.setInterval(function(){
        $(".green").addClass("visible");
        document.querySelector('.green.thepower.visible .inner').style.width = (++counter % 101) + '%';
    }, 10);
}

window.onload = function() {
    progressBar();
    $('#toggleProgress').click(function() {
        progressBar();
    });
};

Answer 2

You can use clearInterval method to stop executing of the method which was set with setInterval. First save the result of setInterval to some variable:

var interval;

window.onload = function(){   
    var counter = 0;

    interval = window.setInterval(function(){
        $(".green").addClass("visible")   ;
        document.querySelector('.green.thepower.visible .inner').style.width =    (++counter % 101) + '%';                                          
    }, 10);
}

After that call clearInterval somewhere passing saved value as parameter:

clearInterval(interval);