我们经常会在网站上面看到,当一个按钮被多次点击之后,提示系统频繁,并且在一段时间之后,才能再次点击。其实这对于js的实现来说非常简单,仅仅需要用到定时器。这里有一个点是非常重要的,当window.setTimeout 的时间设置过长时,因人在点击一个按钮时间过快,可能导致 setout() 事件调用多次。因此,这个时间一定要设置在200-- 300 ms 。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div" style="width: 40px;height: 20px;border: 1px solid red;background-color: #007aff;text-align: center;" οnclick="button()">按钮</div>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/tool.js"></script>
<script>
var i=0;
var closetimer = null;
function button(){
i++;
closetimer = window.setTimeout(setout,200);
}
function setout() {
if (i > 1) {
alert('您的点击过于频繁,请稍后再试');
window.clearTimeout(closetimer);
closetimer = null;
i = 0;
} else {
alert('成功');
i = 0;
}
}
</script>