防抖节流

最新推荐文章于 2025-12-20 12:23:55 发布

原创最新推荐文章于 2025-12-20 12:23:55 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #java #vue #html

防抖和节流是在很多都会见到的东西特别是在登录注册等等请求服务器的场景下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            height: 2000px;
        }
    </style>
</head>

<body>
    <p>防抖：对于短时间内连续触发的事件，让这个事件在短时间内只触发一次</p>
    <p>节流：如果短时间内大量触发该事件，那么在函数执行了一次之后，在指定的时间内不再工作，甚至会超过这个时间</p>
    <input type="text" id="txt">
    <button id="btn">click</button>
    <script>
        var btn = document.getElementById('btn')
        var txt = document.getElementById('txt')
        btn.addEventListener('click', debounce(submit))
       
        function submit() {
            console.log(this.previousElementSibling.value)
        }
        // 防抖
        function debounce(fn) {
            var timerID = null
            // console.log(666)
            return function () {
                if (timerID) {
                    clearTimeout(timerID)
                } else {
                    var that = this
                    var arg = arguments
                    fn.apply(that, arg)
                }
                timerID = setTimeout(function () {
                    // timerID = null
                    fn.apply(that, arg)
                }, 1000)
            }
        }
      

        //节流
        var start = 0

        function throttle(fn, delay) {
            return function () {
                var nowTime = new Date().getTime()
                if (nowTime - start > delay) {
                    fn.apply(this, arguments)
                    start = nowTime
                }
            }
        }
    </script>
</body>

</html>