關于javascript中限定時間內(nèi)防止按鈕重復點擊的思路詳解
前面的話
有一天心血來潮,1分鐘內(nèi)重復點擊了多次博客園首頁的刷新博文列表的刷新按鈕。果不其然,ip當時就被禁用了。后來,重啟自己的路由器,重新獲取ip才可以訪問博客園主頁。那么,設置一個限定時間內(nèi)(比如1秒)防止按鈕被重復點擊的方法會不會更好一點呢?
思路一
最直接的思路可能就是點擊按鈕后,按鈕的事件綁定函數(shù)解綁,1s后重新綁定函數(shù)
<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中限定時間內(nèi)防止按鈕重復點擊的思路詳解就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
ECMAScript6函數(shù)剩余參數(shù)(Rest Parameters)
這篇文章主要介紹了ECMAScript6函數(shù)剩余參數(shù)(Rest Parameters)的相關資料,需要的朋友可以參考下2015-06-06ajax實現(xiàn)加載頁面、刪除、查看詳細信息 bootstrap美化頁面!
這篇文章主要為大家詳細介紹了ajax實現(xiàn)加載頁面、刪除、查看詳細信息,利用bootstrap美化頁面,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03js實現(xiàn)顏色階梯漸變效果(Gradient算法)
在色彩中,色相、明度、純度也都可以產(chǎn)生漸變效果,并會表現(xiàn)出具有豐富層次的美感。本文主要講述兩種顏色RGB數(shù)值的梯級漸變算法。下面跟著小編一起來看下吧2017-03-03