關(guān)于javascript中限定時(shí)間內(nèi)防止按鈕重復(fù)點(diǎn)擊的思路詳解
前面的話
有一天心血來(lái)潮,1分鐘內(nèi)重復(fù)點(diǎn)擊了多次博客園首頁(yè)的刷新博文列表的刷新按鈕。果不其然,ip當(dāng)時(shí)就被禁用了。后來(lái),重啟自己的路由器,重新獲取ip才可以訪問(wèn)博客園主頁(yè)。那么,設(shè)置一個(gè)限定時(shí)間內(nèi)(比如1秒)防止按鈕被重復(fù)點(diǎn)擊的方法會(huì)不會(huì)更好一點(diǎn)呢?
思路一
最直接的思路可能就是點(diǎn)擊按鈕后,按鈕的事件綁定函數(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>
思路二
另一個(gè)思路是獲取并記錄時(shí)間,當(dāng)再次點(diǎn)擊時(shí),時(shí)間間隔大于1s時(shí)才有效
<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>
以上這篇關(guān)于javascript中限定時(shí)間內(nèi)防止按鈕重復(fù)點(diǎn)擊的思路詳解就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
ECMAScript6函數(shù)剩余參數(shù)(Rest Parameters)
這篇文章主要介紹了ECMAScript6函數(shù)剩余參數(shù)(Rest Parameters)的相關(guān)資料,需要的朋友可以參考下2015-06-06ajax實(shí)現(xiàn)加載頁(yè)面、刪除、查看詳細(xì)信息 bootstrap美化頁(yè)面!
這篇文章主要為大家詳細(xì)介紹了ajax實(shí)現(xiàn)加載頁(yè)面、刪除、查看詳細(xì)信息,利用bootstrap美化頁(yè)面,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03JS繼承與閉包及JS實(shí)現(xiàn)繼承的三種方式
大家都知道,面向?qū)ο蟮娜筇卣鳌庋b、繼承、多態(tài)。下面通過(guò)本文給大家介紹JS繼承與閉包及JS實(shí)現(xiàn)繼承的三種方式,感興趣的朋友一起看看吧2017-10-10js實(shí)現(xiàn)顏色階梯漸變效果(Gradient算法)
在色彩中,色相、明度、純度也都可以產(chǎn)生漸變效果,并會(huì)表現(xiàn)出具有豐富層次的美感。本文主要講述兩種顏色RGB數(shù)值的梯級(jí)漸變算法。下面跟著小編一起來(lái)看下吧2017-03-03javascript打印大全(打印頁(yè)面設(shè)置/打印預(yù)覽代碼)
打印頁(yè)面設(shè)置,打印頁(yè)面預(yù)覽在打印過(guò)程中經(jīng)常會(huì)遇到,網(wǎng)上搜集整理了一些實(shí)用的打印方法與大家分享,感興趣的朋友可以了解下哈2013-03-03