關於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中限定時間內防止按鈕重複點擊的思路詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。