DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 關於javascript中限定時間內防止按鈕重復點擊的思路詳解
關於javascript中限定時間內防止按鈕重復點擊的思路詳解
編輯:關於JavaScript     

前面的話

有一天心血來潮,1分鐘內重復點擊了多次博客園首頁的刷新博文列表的刷新按鈕。果不其然,ip當時就被禁用了。後來,重啟自己的路由器,重新獲取ip才可以訪問博客園主頁。那麼,設置一個限定時間內(比如1秒)防止按鈕被重復點擊的方法會不會更好一點呢?

思路一  

最直接的思路可能就是點擊按鈕後,按鈕的事件綁定函數解綁,1s後重新綁定函數

<button id="btn">0</button>
<script>
btn.onclick = function add(){
  btn.innerHTML = Number(btn.innerHTML) + 1;  
  btn.onclick = null;
  clearTimeout(timer);
  var timer = setTimeout(function(){
    btn.onclick = add;
    },1000);  
}
</script>

思路二  

另一個思路是獲取並記錄時間,當再次點擊時,時間間隔大於1s時才有效

<button id="btn">0</button>
<script>
btn.onclick = (function(){
  var last = Date.now();
  return function(){
    var now = Date.now();
    if((now - last)>1000){
      btn.innerHTML= Number(btn.innerHTML) + 1;      
    }
    last = now;
  }
})();
</script>

以上這篇關於javascript中限定時間內防止按鈕重復點擊的思路詳解就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved