關于javascript中限定時間內防止按鈕重復點擊的思路 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　有一天心血來潮，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>