停止setInterval調用離開寬度樣式的函數static

下面的代碼（在此處找到）顯示了一種向右側快速重新啓動非常快的非常快的進度條。這是通過在setInterval內改變元素的寬度來完成的。停止setInterval調用離開寬度樣式的函數static

如何建立一個函數，在調用時凍結進度條的運動（在函數被調用的時刻停止修改它的寬度）？

我正在處理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>

來源

2011-10-01 user974417

這裏有一個方法來阻止，並從上次中斷的地方繼續：

添加到您的HTML：

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

和改變你r 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(); 
    }); 
};

來源

2011-10-01 12:16:34 deviousdodo

這差不多吧！我只需要讓按鈕成爲一個按鈕，意味着一次點擊就停止，第二次或更多次點擊並且什麼也沒有發生，它保持在第一次點擊離開它的地方。如果我能得到它，我會告訴你。謝謝！ – user974417

如果您使用的是jQuery，則只需將.click（）替換爲.one（'click'，...）即可。否則，您可以刪除處理程序中的事件偵聽器，或者只存儲外部標誌（例如，var clicked = false）並在處理程序中檢查它。希望這可以幫助。 – deviousdodo

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

來源

2011-10-01 12:02:54 bjornd

好吧然後:-) – Pointy

停止setInterval調用離開寬度樣式的函數static

回答

相關問題