js 防抖和节流

最新推荐文章于 2024-09-21 16:58:31 发布

M_SSY

最新推荐文章于 2024-09-21 16:58:31 发布

阅读量315

点赞数 1

分类专栏： js 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/M_SSY/article/details/122924893

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

防抖：多次变成一次，只允许一次操作

应用场景：实时查询

封装防抖方法：

<body>
    <input type="text" placeholder="请输入">
</body>

<script>
    // 防抖：多次变成一次 只允许一次
    let inpTel = document.querySelector('input')
    inpTel.addEventListener('input', fdFn(demo, 500))
    // 封装防抖方法
    function fdFn(fn, wait) {
        let timeout = null
        return args => {
            if (timeout) clearTimeout(timeout)
            timeout = setTimeout(fn, wait)
        }
    }

    function demo() {
        console.log('发起请求')
    }
</script>

节流：保证一定时间内，只调用一次函数

应用场景：1.提交表单 2.高频监听事件

封装节流方法：

    <div class="box" style="width: 100px;height: 100px;background: pink;"></div>

    function demo() {
        console.log('发起请求')
    }


    let divBox = document.querySelector('.box')
    divBox.addEventListener('click', jlFn(demo, 500))

    function jlFn(fn, wait) {
        let timeout = null
        return function () {
            if (!timeout) {
                timeout = setTimeout(() => {
                    fn()
                    timeout = null
                }, wait);
            }
        }
    }