函数阻止setInterval调用使width样式保持静态

Function to stop a setInterval call leaving the width style static

本文关键字：样式静态 width setInterval 调用函数更新时间：2023-09-26

下面的代码(在这里找到)显示了一种进度条，它向右侧移动得非常快，重新开始不停止。这是通过在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>

可以使用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);

这是一种从你停下来的地方停止并继续的方法:

添加到你的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();
    });
};