防抖节流

最新推荐文章于 2024-09-22 11:17:00 发布

minimore_zhd

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量91

点赞数

文章标签： js javascript java vue html

本文链接：https://blog.csdn.net/minimorezhd/article/details/113132310

版权

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

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