關(guān)于javascript中限定時間內(nèi)防止按鈕重復(fù)點(diǎn)擊的思路詳解
更新時間：2016年08月16日 08:46:07 投稿：jingxian
下面小編就為大家?guī)硪黄P(guān)于javascript中限定時間內(nèi)防止按鈕重復(fù)點(diǎn)擊的思路詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
前面的話
有一天心血來潮，1分鐘內(nèi)重復(fù)點(diǎn)擊了多次博客園首頁的刷新博文列表的刷新按鈕。果不其然，ip當(dāng)時就被禁用了。后來，重啟自己的路由器，重新獲取ip才可以訪問博客園主頁。那么，設(shè)置一個限定時間內(nèi)(比如1秒)防止按鈕被重復(fù)點(diǎn)擊的方法會不會更好一點(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>
思路二
另一個思路是獲取并記錄時間，當(dāng)再次點(diǎn)擊時，時間間隔大于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>
以上這篇關(guān)于javascript中限定時間內(nèi)防止按鈕重復(fù)點(diǎn)擊的思路詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Js實(shí)現(xiàn)的動態(tài)增加表格的文章有很多，但大多數(shù)都不兼容FF和IE，于是手寫了一個，經(jīng)測試效果還不錯，特此與大家分享，感興趣的朋友不要錯過2013-10-10
這篇文章主要為大家詳細(xì)介紹了TypeScript的類型注解，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
由于border屬性引起的div寬度問題，確實(shí)很讓人頭疼，在本文將為大家介紹下使用JS是如何解決的，感興趣的朋友不要錯過2013-11-11
JS中用三種方式實(shí)現(xiàn)導(dǎo)航菜單中的二級下拉菜單
我們在淘寶、搜狐等大型網(wǎng)站上都可以看到使用的一些二級下拉菜單，比如下面這張圖片。那么如何實(shí)現(xiàn)導(dǎo)航菜單欄中的二級下拉菜單呢？下面小編給大家分享JS中用三種方式實(shí)現(xiàn)導(dǎo)航菜單中的二級下拉菜單，感興趣的朋友一起看看吧2016-10-10
今天小編就為大家分享一篇layui插件表單驗(yàn)證提交觸發(fā)提交的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)文件拖拽事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-03-03
這篇文章主要介紹了Bootstrap組件系列之福利篇幾款好用的組件(推薦) 的相關(guān)資料,需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序uniapp添加懸浮菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
本文主要介紹了WebPack的基礎(chǔ)知識，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了JS判斷當(dāng)前頁面是否在微信瀏覽器打開的方法,涉及JavaScript針對客戶端的相關(guān)判定技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-12-12