Функция для остановки вызова setInterval, оставляя стиль ширины статичным - PullRequest
Новая
       6

Функция для остановки вызова setInterval, оставляя стиль ширины статичным

0 голосов
/ 01 октября 2011

Код ниже (найденный здесь) показывает своего рода индикатор выполнения, который очень быстро движется к правой стороне, перезапуская без остановки. Это делается путем изменения ширины элемента в пределах 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>

Ответы [ 2 ]

1 голос
/ 01 октября 2011

Вы можете использовать метод 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);
0 голосов
/ 01 октября 2011

Вот способ остановиться и продолжить с того места, где вы остановились:

Добавьте это к своему 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();
    });
};
...