闭包节流练习倒计时

最新推荐文章于 2024-03-08 11:11:54 发布

艺能人金广发

最新推荐文章于 2024-03-08 11:11:54 发布

阅读量86

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/Chico_Feng/article/details/128234892

版权

<!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>