防抖与节流

最新推荐文章于 2024-03-28 09:15:14 发布

努力学前端Hang

最新推荐文章于 2024-03-28 09:15:14 发布

阅读量423

点赞数 1

分类专栏： vue 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_57108418/article/details/128540320

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

1、什么是防抖

搜索框（执行次数太多，只执行最后一次）

每次搜索框输入时，都会发送一次请求，但每次都不是用户想要搜索的内容，等到用户输入完成时，再将搜索框的内容进行搜索，才是用户需要搜索的内容

1、2没有防抖的搜索过程

当拼音输入前端开发时，发送了那么多次请求

显然这都不是用户想要搜索的东西

<body>
    <input type="text" id="inp">
    <script>
        // 获取输入框
        let inp=document.getElementById('inp')
        // 用来存放定时器
        let t=null
        // 输入框监听输入的数据
        inp.oninput=function(){
           console.log(this.value)
        }
    </script>
</body>

1、3如何实现防抖

1、在每次输入文本后，判断在0.5秒内用户是否再次输入文本，

2、若用户在0.5s内没有输入文本，则把文本的内容发送给服务器实现搜索

3、若用户在0.5s内继续输入文本，在输入后在判断用户是否输入，重复第二点

定时器实现

<body>
    <input type="text" id="inp">
    <script>
        // 获取输入框
        let inp=document.getElementById('inp')
        // 用来存放定时器
        let t=null
        // 输入框监听输入的数据
        inp.oninput=function(){
            // 如果t是定时器
            if(t!==null){
                // 清除定时器
                clearTimeout(t)
            }
            // 重新赋值定时器
            t=setTimeout(()=>{
                // 业务逻辑
                console.log('请求的数据',this.value)
            },500)
        }
    </script>
</body>

实现结果如下图所示

1、4用闭包实现防抖函数

<body>
    <input type="text" id="inp">
    <script>
        // 获取输入框
        let inp=document.getElementById('inp')
        // 输入框监听输入的数据
        inp.oninput=debounce(function(){
            console.log('发送请求',this.value)
        },500)
        // 封装一个防抖函数
        function debounce(fn,delay){
            // 用来存放定时器
            let t=null
            // 让输入框执行上面的函数
            return function(){
                // 如果t是定时器
                if(t!==null){
                    // 清除定时器
                    clearTimeout(t)
                }
                // 重新赋值定时器
                t=setTimeout(()=>{
                    // 业务逻辑,修改this指向
                    fn.call(this)
                },delay)
            }
        }
    </script>
</body>

2、什么是节流

点击按钮（页面一下执行太多次，控制执行次数）

业务逻辑：点击按钮向服务器发送请求，又要避免用户多次点击按钮发送请求

// 获取btn按钮
let btn=document.getElementById('btn')
btn.onclick=throttle(function(){
    console.log('发送了请求')
},2000)

// 节流函数
function throttle(fn,delay){
    // 不会被干扰（闭包）
    let flag=true
    return function(){
        // 为true，发送一次请求
        if(flag){
            setTimeout(()=>{
                fn.call(this)
                flag=true
            },delay)
        }
        flag=false
    }
}

努力学前端Hang

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
防抖与节流

点击按钮（页面一下执行太多次，控制执行次数）业务逻辑：点击按钮向服务器发送请求，又要避免用户多次点击按钮发送请求// 获取btn按钮console.log('发送了请求')},2000)// 节流函数// 不会被干扰（闭包）// 为true，发送一次请求if(flag){flag=true},delay)}}}
复制链接

扫一扫