1.函数防抖是什么，为什么，怎么实现

最新推荐文章于 2024-02-26 16:03:19 发布

半夜追风人

最新推荐文章于 2024-02-26 16:03:19 发布

阅读量165

点赞数 1

分类专栏：面试准备中文章标签：函数防抖前端优化输入事件 CPU压力服务器请求

本文链接：https://blog.csdn.net/m0_46439976/article/details/120233858

版权

面试准备中专栏收录该内容

17 篇文章 0 订阅

订阅专栏

定义:A事件执行完成 “一段时间”后，引起B事件的执行；在 “一段时间内”如果A 事件又执行了，那么会重新计时

为什么要使用函数防抖：降低某个事件执行的频率，于电脑而言，减少函数执行次数，CPU压力更小；于优化而言，减少了发送请求的次数，减小了服务器压力

例子：在键盘停止输入2s后，发送请求到服务器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数防抖</title>
</head>
<body>
    <!--输入停止2秒后会在控制台打印 “发送请求”-->
    <p><input type="text" placeholder="请输入内容"></p>
</body>
<script>

    //1.获取input标签
    let box=document.querySelector('input')

    //2.实现输入停止3秒后发送请求(实现方式1)
    // let timer=null
    // box.οninput=function (){
    //     if (timer!==null){
    //         clearTimeout(timer)
    //     }
    //     timer=setTimeout(function (){
    //         console.log("发送请求")
    //     },2000)
    // }

    //上述方式的缺点：timer定义成了全局变量，污染了全局作用域；因此想到使用闭包来实现；使用闭包可以导致局部变量不被释放的特性

    //3.实现方式二：
    function debounce(fn,timeout){
        let timer=null
        return function (){
            if (timer!==null){
                clearTimeout(timer)
            }
            timer=setTimeout(fn,timeout)
        }
    }
    box.oninput=debounce(function (){
        console.log("发送请求")
    },2000)

</script>
</html>