JS實現(xiàn)禁止高頻率連續(xù)點擊的方法【基于ES6語法】
更新時間：2017年04月25日 11:29:03 作者：TomG
這篇文章主要介紹了JS實現(xiàn)禁止高頻率連續(xù)點擊的方法,通過事件監(jiān)聽結(jié)合定時器實現(xiàn)針對高頻率點擊的限制操作,該功能基于ES6語法實現(xiàn),需要的朋友可以參考下
本文實例講述了JS實現(xiàn)禁止高頻率連續(xù)點擊的方法。分享給大家供大家參考，具體如下：
1、類似react的數(shù)據(jù)流，點擊之后立即設(shè)置值為空，當返回值后才可以點擊
2、設(shè)置定時器，每次進入之前先清空掉定時器，然后開啟定時器
<main>
<div id="me" style="width: 100px;height: 50px; margin: 5rem auto;background: blue;color: #fff">點我</div>
</main>
<script>
let c =null;
let dom = document.querySelector('#me');
dom.addEventListener('click',function(){
clearTimeout(c);
c = setTimeout(function(){
console.log(2000)
},1000)
},false)
</script>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《ECMAScript6(ES6)入門教程》、《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript字符與字符串操作技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要為大家詳細介紹了three.js利用射線Raycaster進行碰撞檢測，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
下面小編就為大家?guī)硪黄獙τ贘avascript 執(zhí)行上下文的全面了解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家介紹了JavaScript前端超時異步操作的完美解決方式，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步2021-11-11
直接在JS里創(chuàng)建JSON數(shù)據(jù)然后遍歷使用
本節(jié)為大家講解下直接在JS里創(chuàng)建JSON數(shù)據(jù)，然后遍歷使用,需要的朋友可以參考下2014-07-07
JS實現(xiàn)仿Windows經(jīng)典風格的選項卡Tab切換代碼
這篇文章主要介紹了JS實現(xiàn)仿Windows經(jīng)典風格的選項卡Tab切換代碼,涉及JavaScript元素的遍歷與樣式的修改技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
在頁面中繪制表格可以滿足我們對數(shù)據(jù)的輸入需求，在js中可以很容易實現(xiàn)，下面有個不錯的示例，感興趣的朋友可以參考下2013-09-09
今天遇到了一些題，比較有意思和輕巧，而且加強運用一下了js原生語法，現(xiàn)在小編總結(jié)好后分享給大家，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-09-09
js中的傳值方式,對于簡單類型(好比字符串和數(shù)值)就是值傳遞和引用傳遞,下面這篇文章主要給大家介紹了關(guān)于JavaScript傳參的6種方式,需要的朋友可以參考下2023-03-03
JS中console對象內(nèi)部提供調(diào)試方法示例詳解
本文介紹了JavaScript中`console`對象提供的多種調(diào)試方法,包括`log`、`debug`、`dir`、`table`、`clear`、`group`、`groupEnd`、`time`和`timeEnd`,每種方法都有其特定的用途,感興趣的朋友跟隨小編一起看看吧2025-02-02
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)商品評價五星好評，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11