<!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>
<h1>10</h1>
<button>开始</button>
</body>
<!-- 实现效果,无论怎么点击按钮只会按照规定的频率来进行 -->
<script>
var h1 = document.querySelector('h1')
var btn = document.querySelector('button')
// 创建节流函数
function throttle(outFun,ms) {
// 定义定时器
var timer
// 创建开关
var off = true
// 定义内函数,点击事件的事件函数
return function() {
// 如果开关关闭则不再执行
if(!off) return
// 当点击后关闭开关
off = false
// 清除定时器
clearInterval(timer)
// 创建定时器
timer = setInterval(outFun,ms)
}
}
// 创建被定时器执行的函数
function out() {
// 获取h1的值,并重新赋值
var val = h1.innerText
val--
h1.innerText = val
// 当执行完后,将开关重新打开,才能进行下一次事件
off = true
}
// 点击事件
btn.onclick = throttle(out,2000)
</script>
</html>
闭包节流 练习倒计时
最新推荐文章于 2024-03-08 11:11:54 发布