类似王者荣耀的技能,冷却事件为5s在这5秒中咋点都不会放技能,当五秒过了才能放技能
javascript"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">点击</button>
</body>
</html>
<script>
const btn = document.getElementById("btn")
function log() {
console.log(Math.random());
}
function thro(fn, delay) {
let time//这时time会被赋值为undefined
//如果time没有值执行
return function () {
//每次点击都会掉let time,要把它放在闭包里,才能保证每次不掉let time
if (!time) {
//给time赋一个值,这时time就有值了就不会执行这里的函数
time = setTimeout(() => {
fn()
// 执行完 要把time赋值为null才能继续执行if里面的函数
//当1秒没过去的时候每次点击time都是有值的,所以不会执行函数,但是等函数
//执行完了就会把time赋值为null再次点击就会执行函数
//time = null不能放在外面,settimeout是个异步函数 会先执行time = null
time = null
}, delay)
}
}
}
//onclick要执行的时thro的返回的函数而不是thro函数
btn.onclick = thro(log, 1000)
</script>