为什么防抖，节流，如何实现防抖，节流

最新推荐文章于 2024-09-25 17:34:00 发布

JustinST

最新推荐文章于 2024-09-25 17:34:00 发布

阅读量564

点赞数 1

文章标签： javascript es6 html

本文链接：https://blog.csdn.net/JustinST/article/details/120519413

版权

一、什么是防抖，节流

防抖：为了提高项目的性能，在事件触发后，超时调用，如果在短时间内触发了则清除超时调用，规定时间代码只执行一次，提高性能

节流：为了提高项目的性能，当事件触发后，约定单位时间之内`，`事件代码执行一次，所以，节流减少了单位时间内代码的执行次数，从而提高性能

1、防抖案例如下：

为什么防抖？

当我们在输入框输入时，如果不做防抖，那么获取他的value值时，每输入一个字母都会获取一次，一个简单的词汇都要获取多次，这将造成整个项目性能减低，因此需要优化性能，即防抖

<!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>Document</title>
</head>
<body>
    <input type="text">
    
    <script>
        const input =document.querySelector('input')
        input.oninput=function(){
            console.log(this.value);
        }
    </script>
</body>
</html>

防抖代码实现：

<!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>Document</title>
</head>
<body>
    <input type="text">
    
    <script>
        // 获取input标签
        const input=document.querySelector('input')
        // //将事件绑定在input标签上
        let timer;
        input.oninput = function(){
            // 清除超时调用
            if(timer){
                
                clearTimeout(timer)
            }
            // 超时调用
            timer=setTimeout(()=>{
                console.log(this.value);
            },1000)
        }

    </script>
</body>
</html>

防抖代码是项目用的比较多的，因此一般把他封装起来多处使用：

封装如下：

<!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>Document</title>
</head>
<body>
    <input type="text">
    
    <script>
        const input = document.querySelector('input')
        //调用
        input.oninput=debounce(function(){
            console.log(this.value);
        },1000);
        // 封装防抖函数
        function debounce (fn,delay){
            let timer;
            return function(){
                if (timer){
                    clearTimeout(timer)
                }
                timer=setTimeout(()=>{
                    fn.call(this)
                },delay)
            }
        }
    </script>
</body>
</html>

2、节流案例如下：

为什么节流？

就如我们滚动滚轮时，滚动一下则会输出不止一次，就如同水龙头的水流量，我们希望节流，按我们想要的水流量流出而不浪费，

<!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>Document</title>
    <style>
        body{
            height: 2000px;
        }
    </style>
</head>
<body>
    <script>
    // 节流：控制高频事件的触发事件
        window.onscroll=function(){
            console.log("滚动了");
        }
    </script>
</body>
</html>

节流实现：

<!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>Document</title>
    <style>
        body{
            height: 2000px;
        }
    </style>
</head>
<body>
    <script>
    // 节流：控制高频事件的触发事件
    let flag=true
        window.onscroll=function(){
            if(flag){
                setTimeout(()=>{
                    console.log("滚动了");
                    flag=true
                },1000)
            }
            flag=false
        }

    </script>
   
</body>
</html>

封装：

<!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>Document</title>
    <style>
        body{
            height: 2000px;
        }
    </style>
</head>
<body>
//封装
    <script>
        window.onscroll=throttle(function(){
            console.log('滚动了');
        },1000)
        function throttle(fn,delay){
            let flag=true;
            return function(){
                if(flag){
                    setTimeout(()=>{
                        fn.call(this)
                        flag=true
                    },delay)
                }
                flag=false
            }
        }
    </script>
</body>
</html>