缘起：
实现一个业务场景时，因为某某某原因，不能让客户对某些按钮进行1秒点10次的骚操作，所以需要实现多个按钮快速点击只执行最后一次。
代码
<!DOCTYPE html>
<html>
<head>
<title>快速点击只执行最后一次</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul,ol,li{
list-style: none;
}
.wrap{
400px;
height:460px;
border:1px solid red;
}
.wrap ul li {
float: left;
140px;
height: 100px;
margin:20px;
line-height: 100px;
border: 1px solid black;
text-align: center;
}
.wrap p{
float: left;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="ulList">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<p>最后一次显示的是：<span id="content"></span></p>
</div>
<script type="text/javascript">
var list = document.querySelectorAll('li')
console.log(list)
// 闭包方法实现循环
// for(var i=0;i<list.length;i++){
// (function(){
// var p = i
// list[i].onclick = function() {
// console.log(p+1);
// }
// })();
// }
//不用闭包循环，只需要把var改为let,使i变量作用域范围变成块级即可。
for(let i=0;i<list.length;i++){
var timer = null;
list[i].onclick = function() {
if(timer) {
clearTimeout(timer);
}
timer = setTimeout(function(){
document.querySelector('#content').innerHTML = i + 1;
console.log(i+1);
timer = null;
},500);
};
}
</script>
</body>
</html>例行总结：
这样的需求可能比较少吧，但是还是有用的。一般可以根据实际需要，根据按钮的Index判断，如果当前按钮被激活，则不允许再被点击。如果是快速在多个按钮下切换，则可以用上面提供的方法，只执行最后一次。但是有个弊端，比如只点击一次，命令也会在500毫秒之后才下发。还需要完善一下。