如果不希望用戶頻繁觸發(fā)某個事件,可以采用事件節(jié)流的方法解決忆嗜,在短時間(可設(shè)置)內(nèi)連續(xù)觸發(fā),只會執(zhí)行一次事件陕习。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div {
width: 200px;
height: 200px;
background-color: red;
transition: width 2s linear 0s;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>
<script>
var div = document.querySelectorAll(".div")[0];
var num = 0;
var t = null;
//事件累加的功能
//js 多次觸發(fā)點(diǎn)擊事件,在一定延遲內(nèi)只執(zhí)行一次
div.onclick = function() {
if(t != null) {
clearTimeout(t)
}
t = setTimeout(function() {
num++;
console.log(num);
}, 500)
}
</script>
在低于500毫秒間隔內(nèi)霎褐,連續(xù)觸發(fā)多次點(diǎn)擊事件址愿,只會執(zhí)行一次该镣。