示例的源碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript"></script>
</head>
<body style="height: 300px;background: green;">
<script>
var f = '';
var num = 0;
$('body').click(function(argument) {
if(f){
clearTimeout(f);
}
f = setTimeout(function(argument) {
num++;
console.log(num);
},800)
})
</script>
</body>
</html>
在瀏覽器中打斷點后的分析總結(jié):
首次點擊 if 為false 會在下面的函數(shù)執(zhí)行中生成一個 setTimeout 事件 缅糟, 在 800ms 內(nèi)再次點擊 if 為 true 會清除掉上次生成的 setTimeout 事件 , 往下面執(zhí)行時又重新生成一個新的 setTimeout 事件, 所以在 800ms 內(nèi)連續(xù)點擊只會執(zhí)行最后一次點擊的事件,所以便完成了稀釋的效果腹躁。