节流与防抖

最新推荐文章于 2024-08-21 15:43:48 发布
最新推荐文章于 2024-08-21 15:43:48 发布
阅读量170 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sitarry/article/details/124172856
版权

1.我们先了解为什么要节流和防抖

我们给一个inpu输入框绑定一个oninput事件，此时我们输入“前端开发”四个字，我们

观察以下后台打印

 

<!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 inp = document.querySelector('input');
        inp.oninput = function() { //我们给input输入框绑定了一个input事件
            console.log(this.value);
        }
    </script>
</body>
 
</html>

 

 

我们仅仅输入四个字，就触发了几十次事件，

如果说我每一次输入都和后台进行数据交互，那么将会很影响计算机的性能。

因此我们需要让请求的次数大大减少，因此我们需要利用防抖来减少用户操作过多，与后台数据交互的次数。


2.防抖

防抖：用户触发事件过于频繁，只要最后一次事件的操作。

也就是说，用户频繁的操作，我们只取最后一次操作。

比如

同样我们输入‘前端开发’四个字，如果我们输入的时间间隔小于0.5秒，就不触发oninput事件，

如果我们输入的时间间隔大于0.5秒，那么我们就触发oninput。

这样我们就大大减少了请求的次数。
 

<!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 inp = document.querySelector('input');
        let t = null;
        inp.oninput = function() { //我们给input输入框绑定了一个input事件
            if (t !== null) {
                clearTimeout(t)
            }
            t = setTimeout(() => {
                console.log(this.value)
            }, 500)
        }
    </script>
</body>
 
</html>

 

 

如图，我们只要输入的时间间隔小于0.5秒，就不会触发oninput事件，只有当我们的输入的时间间隔超过0.5秒时，才会触发该事件。对比之下，我们触发的次数少了很多。

虽然以上代码完成了防抖的效果，但是还可以再优化一下，为什么要优化呢

在我们写的代码中只有console.log(this.value) 是真正的业务逻辑代码

 而且我们还定义了一个全局变量t，

以及这部分是防抖代码和业务代码混在一起，
 

           //防抖的逻辑和业务逻辑混在一起了
             if (t !== null) {
                clearTimeout(t)
            }
            t = setTimeout(() => {
                console.log(this.value) //真正的业务逻辑代码
            }, 500)

，而且该部分代码可读性不太好，别人需要看半天才知道是防抖，因此我们需要优化一下。 

我们可以通过闭包来优化防抖代码

使用闭包可以不用产生全局变量t，并且可以让防抖代码与业务代码隔离；

<!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 inp = document.querySelector('input');
       
 
        inp.oninput = debounce(function() {
            console.log(this.value)
        }, 500);
 
        function debounce(fn, delay) {
            let t = null;
            return function() {
                if (t !== null) {
                    clearTimeout(t)
                }
                t = setTimeout(() => {
                    fn();
                }, delay)
            }
        }
    </script>
</body>
 
</html>

 

很多人看到这里可能一头雾水，突然有点看不懂了，别着急，我来慢慢解释。

这里我们定义了一个防抖函数debounce

      inp.oninput = debounce();
     
     
       function debounce() {//防抖函数
                return function() {
                   
                }
            }

我们知道inp.oninput事件=一个函数，

所以debounce返回一个函数，并且我们需要将相关逻辑作为参数，传给debounce

inp.oninput = debounce(function(){},500);//参数function(){}中执行业务代码，500是传入的延时时间
 
 
   function debounce(fn,delay) {//fn是要执行的业务逻辑，是函数//delay为定时器的延时事件
            let t=null;
            return function() {
               if (t !== null) {
                    clearTimeout(t)
                }
                t = setTimeout(() => {
                    fn(); //执行的业务代码
                }, delay)
            }
        }

接着

 inp.oninput = debounce(function() {
            console.log(this.value)
        }, 500);
 
        function debounce(fn, delay) {
            let t = null;
            return function() {
                if (t !== null) {
                    clearTimeout(t)
                }
                t = setTimeout(() => {
                    fn();
                }, delay)
            }
        }

我们运行一下代码，输入

发现输出的是undefind 

 

  我们打印一下this，发现打印的是window，

 inp.oninput = debounce(function() {
            console.log(this)//打印this
        }, 500);
 
        function debounce(fn, delay) {
            let t = null;
            return function() {
                if (t !== null) {
                    clearTimeout(t)
                }
                t = setTimeout(() => {
                    fn();
                }, delay)
            }
        }

 

 因此我们需要在改变this的指向，也就是改变参数fn的this的指向

inp.oninput = debounce(function() {
            console.log(this)//打印this,指向window
        }, 500);
 
        function debounce(fn, delay) {
            let t = null;
            return function() {
                if (t !== null) {
                    clearTimeout(t)
                }
                t = setTimeout(() => {
                    console.log(this)//指向input
                    fn();//fn的this指向window
                }, delay)
            }
        }

改变this指向后的代码

inp.oninput = debounce(function() {
            console.log(this.value)        
}, 500);
 
        function debounce(fn, delay) {
            let t = null;
            return function() {
                if (t !== null) {
                    clearTimeout(t)
                }
                t = setTimeout(() => {
                   
                    fn.call(this);//通过call改变this指向
                }, delay)
            }
        }

 

 这样防抖代码优化完了。

完整代码如下：

<!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 inp = document.querySelector('input');
 
 
        inp.oninput = debounce(function() {
            // console.log(this);
            console.log(this.value)
        }, 500);
 
        function debounce(fn, delay) {
            let t = null;
            return function() {
                if (t !== null) {
                    clearTimeout(t)
                }
                t = setTimeout(() => {
                    fn.call(this);
                }, delay)
            }
        }
    </script>
</body>
 
</html>

3.节流

什么是节流？

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

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

我们先做一个滚动事件，只要我们让滚动条滚动就会打印123，如下图，我们只是滚动了一下，

就触发了一百多次，如果是和后台服务器产生数据交互，同样对性能消耗是比较大的。

因此我们需要节流。
 

<!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(123);
        }
    </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('123');
                    flag = true;
                }, 500)
            }
            flag = false;
        }
    </script>
</body>
 
</html>

 代码优化后

  window.onscroll = throttle(function() {
            console.log(123);
        }, 500)
 
        function throttle(fn, delay) {
            let flag = true;
            return function() {
                if (flag) {
                    setTimeout(() => {
                        fn.call(this);
                        flag = true;
                    }, delay)
                }
                flag = false;
            }
        }

Sitarry
关注
防抖(debounce) 和 节流(throttling)
独碟的博客
07-05 14万+
防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案。 在给DOM绑定事件时，有些事件我们是无法控制触发频率的。 如鼠标移动事件onmousemove, 滚动滚动条事件onscroll，窗口大小改变事件onresize，瞬间的操作都会导致这些事件会被高频触发。 如果事件的回调函数较为复杂，就会导致响应跟不上触发，出现页面卡顿，假死现象。 在实时检查输入时，如果我们绑定onkeyup事件发请求去...
节流与防抖的讲解与其封装
zhangawei123的博客
11-17 962
本文讲解一下节流和防抖的原理，和简单的使用。然后做一下节流与防抖的封装。
节流和防抖
qq_41860476的博客
10-15 3545
节流和防抖的目的：都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，防止在短时间内频繁触发同一事件而出现延迟，假死或卡顿的现象。 节流和防抖的区别： 节流：目前有一事件A设置了定时器，那么在delay之前触发，都只会触发一次 防抖：如果不断在delay之前重新触发，那么定时器会不断重新计时，最终会在最后一次完后才执行，对于需要实时响应的，应该用节流。 以下分别是节流和防抖的实现代码 节流 <script> /* 节流 思路： 节流是确保在delay之前只有一次事件触
节流和防抖的区别
最新发布
SR003的博客
08-21 603
节流：在规定时间内无论触发多少次，函数只执行一次。防抖：在规定时间内如果有多次触发，函数只会在最后一次触发后的延迟时间内执行。
当Flutter遇到节流与防抖的思路和流程优化
01-04
前言 在 Google I/O ’17 上，Google 向我们介绍了 Flutter —— 一款新的用于创建移动应用的开源库。 Flutter是什么呢?它是Google使用Dart语言开发的移动应用开发框架，用来帮助开发者在iOS和Android平台上开发高...
javaScript函数节流与防抖之区别
08-11
在JavaScript开发中，熟练掌握和应用防抖与节流技术，可以显著提升用户体验，防止页面卡顿，尤其在大数据量或者复杂计算的场景下，能有效提高网页的性能和响应速度。 在实际项目中，我们可以使用现成的库如lodash或...
js代码-函数节流与防抖
07-16
在JavaScript编程中，...通过理解和应用函数节流与防抖，开发者可以编写出更加高效、响应更快的JavaScript代码，提高用户体验。在实际项目中，合理地运用这些技巧，可以显著改善性能，尤其是在资源有限的移动设备上。
防抖节流打包
l_tsov的博客
12-11 698
防抖 function debounce(fn,delay){ let timer = null //借助闭包 return function() { if(timer){ clearTimeout(timer) } timer = setTimeout(fn,delay) // 简化写法 } } // 然后是旧代码 function showTop () { var scrollTop = d.
JS节流和防抖
xiaomajia029的博客
09-12 5945
目录 1. JS节流和防抖的应用场合 2. 未使用节流和防抖的情况 3. js防抖 4. js节流 1. JS节流和防抖的应用场合 在网页实际运行的某些场景下，有些事件时会被不间断的被触发的，如resize事件，而不像是我们想象中的，滚动一次触发一次。这种情况下，由于过于频繁地DOM操作和资源加载，严重影响了网页性能，甚至会造成浏览器崩溃。 常见应用场景： （1）window的 ...
JavaScript节流与防抖技术解析
"JavaScript节流和防抖技术的理论与实践" 在JavaScript中，节流（Throttling）和防抖（Debouncing）是两种非常重要的优化策略，主要用于限制函数的执行频率，以提高应用的性能和响应速度。它们在处理与用户交互相关...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值