停止 setInterval 调用并使宽度样式保持静态的函数

Question

下面的代码（在这里找到）显示了一种进度条，它非常快速地向右侧移动，不停地重新启动。这是通过在 setInterval 内更改元素的宽度来完成的。

如何构建一个在调用时冻结进度条运动的函数（阻止宽度在调用函数时冻结它）？

我正在使用prototype/javascript（代码中的jQuery 行是添加类以发布这篇文章的快速方法，但我没有使用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

您可以使用clearInterval方法来停止执行使用setInterval设置的方法。首先将 setInterval 的结果保存到某个变量：

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);
}

之后在某处调用clearInterval，将保存的值作为参数传递：

clearInterval(interval);

Answer 2

这是一种停止并从您上次停下的地方继续的方法：

将其添加到您的 HTML：

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

并将您的 javascript 更改为：

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();
    });
};