JS防抖函数实现及应用

最新推荐文章于 2024-05-03 20:42:42 发布

金色浪花

最新推荐文章于 2024-05-03 20:42:42 发布

阅读量3.4k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/baidu_36095053/article/details/117537149

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、什么是防抖函数：

防抖函数是指事件多次不间断触发，在一定时间内没有再触发时，执行最后一次触发的事件函数。举个栗子，你每天给你女神送牛奶，女神从未响应过你的好意，但当你一段时间没有送牛奶时，女神就会开始响应你。这就是一个简单的防抖机制（看来女神精通防抖函数）。

二、作用

那么防抖函数有什么作用呢？我们为什么要学防抖函数呢？

他可以优化前端性能，在一些频繁触发的事件里尤为明显，例如窗口resize事件，屏幕scroll事件，鼠标mousemove事件。因为这些事件触发频繁，如果不用防抖，那么事件的绑定函数会运行无数次，严重影响性能。使用了防抖，就可以实现，当事件在我们规定的延迟时间内不再触发，我们就执行一次事件绑定函数。

三、应用

一、使用Echats等可视化类库实现当窗口宽度变化而变化图形

二、图片、列表懒加载

三、输入框keyup实时搜索

等等.......(想到再补充)

四、实现

本案例实现的是，实时监听用户输入事件，在用户停止输入延迟一秒后执行我们相关的事件处理函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闭包应用，防抖函数</title>
</head>
<body>
    <input type="text" id='input'>
</body>
</html>

<script>

    let handle = function(val){
        /*逻辑体*/
        console.log(val);
    }

    function delayPrint(delay, callback){
        let timer = null;

        return function(value){/*注意点一：在返回该函数时无法确定的参数都要在这里接收而不是在父级形参中接收。例如在本例中，返回该函数时无法确定keyup的值，所以在这里要接收。*/
            if(timer){
                clearInterval(timer);
            }

            timer = setTimeout(function(){
                callback(value) /*注意点二：这里是function(){callback(val)}，而不是直接放callback(val)，直接放callback(val)是函数调用。*/
            },delay);
        }

    }

    let func = delayPrint(1000, handle);

    document.getElementById('input').addEventListener('keyup',function(e){
        //console.log(e.target.value);
        let val = e.target.value;
        func(val)
    })
</script>

最终效果：