防抖和节流

最新推荐文章于 2022-12-27 20:26:37 发布

.慢慢亦漫漫

最新推荐文章于 2022-12-27 20:26:37 发布

阅读量216

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html5

本文链接：https://blog.youkuaiyun.com/weixin_43183219/article/details/125112837

版权

JavaScript 专栏收录该内容

42 篇文章

订阅专栏

本文探讨了前端开发中为优化性能而使用的防抖和节流技术。通过实例展示了如何在input事件中应用防抖，确保只处理用户的最后一次操作，以及如何在滚动事件中应用节流，限制事件处理的频率。通过代码展示和优化，解释了防抖与节流的区别，以减少不必要的计算，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在说防抖和节流之前，我们先来看一个没有防抖和节流的例子。

我们给input框绑定一个oninput的事件，获取值并在后台打印出来，看下代码：

<body>
    <input type="text" placeholder="请输入内容">
</body>
<script>
    let input=document.querySelector('input')
    input.oninput=function(){
        console.log(this.value)
    }
</script>

在这里插入图片描述
我们可以看见我们只是输入了五个字，但是触发了14次事件，那如果每次输入数据我们都会与计算机进行交互，这个是会非常影响计算机的性能的，为了优化性能，也就有了我们的防抖和节流。

防抖

什么是防抖

防止用户操作频繁，我们只要用户的最后一次操作

代码展示

<body>
    <input type="text" placeholder="请输入手机号">
</body>
<script>
    let input = document.querySelector('input')
    let timer=null
    input.oninput =function(){
        if(timer!==null){
            clearTimeout(timer)
        }
        timer=setTimeout(()=>{
            console.log(this.value)
        },2500)
    }
</script>

代码优化

<body>
    <input type="text" placeholder="请输入内容">
</body>
<script>
    let input=document.querySelector('input')
    //debounce返回一个函数，我们需要将相关逻辑作为参数，传给debounce
    input.oninput=debounce(function(){
        console.log(this.value)
       
    },500)
    //fn是业务逻辑，deplay是定时器的延时事件
    function debounce(fn,deplay){
            let timer=null;
            return function(){
                if(timer!==null){
                    clearTimeout(timer)
                }
                timer=setTimeout(()=>{
                    //改变this的指向
                    fn.call(this)
                },deplay)
            }
        }
</script>

在这里插入图片描述

节流

什么是节流

控制高频事件的执行次数（事件频繁触发时，每隔多少秒触发一次）

防抖是只执行最后一次，而节流是减少执行次数。

举一个简单的例子，我们写一个滚动事件，滚动滚动条时，就在控制台打印 ‘节流’，先看一下没有使用节流时的代码和效果：

<style>
    body{
        height: 2000px;
    }
</style>
<body>
   
</body>
<script>
    window.onscroll=function(){
        console.log('节流')
    }
</script>

在这里插入图片描述
我们可以看见我们滚动条触发了八十多次事件，这个对性能消耗也是非常大的，下面看下使用节流之后的变化

节流代码展示

<style>
    body{
        height: 2000px;
    }
</style>
<body>
    <script>
        let flag = true;
        window.onscroll = function() {
            if (flag) {
                setTimeout(() => {
                    console.log('节流优化');
                    flag = true;
                }, 500)
            }
            flag = false;
        }
    </script>
</body>

在这里插入图片描述

节流代码优化

<style>
    body{
        height: 2000px;
    }
</style>
<body>
    <script>
        
  window.onscroll = throttle(function() {
            console.log('节流优化');
        }, 500)
 
        function throttle(fn, delay) {
            let flag = true;
            return function() {
                if (flag) {
                    setTimeout(() => {
                        fn.call(this);
                        flag = true;
                    }, delay)
                }
                flag = false;
            }
    </script>
</body>