通过简单的小例子来看函数防抖和函数节流

最新推荐文章于 2023-10-16 22:35:36 发布

爱喝冬瓜汤的外星人

最新推荐文章于 2023-10-16 22:35:36 发布

阅读量238

点赞数

分类专栏： js基础文章标签： javascript

本文链接：https://blog.csdn.net/qq_41893334/article/details/108535019

版权

函数防抖函数节流性能优化 JavaScript 事件处理

关键词由CSDN通过智能技术生成

js基础专栏收录该内容

31 篇文章 0 订阅

订阅专栏

什么是函数防抖（debounce）？

函数防抖是优化高频率执行js的一种手段
可以让被调用的函数在一次高频操作的过程中只被调用一次

函数防抖的作用

减少代码的执行频率，提升网页性能

应用场景

oninput、onmousemove、onscroll、onresize等

一个小例子（防抖前）：当输入框的内容改变就会打印输出内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <script>
        let oInput = document.querySelector('input');
        oInput.oninput = function(){
            console.log(this.value);
        }
    </script>
</body>
</html>

防抖后：连续的操作只会打印输出一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <script>
        let oInput = document.querySelector('input');
        let timerId = null;
        oInput.oninput = function(){
            timerId && clearTimeout(timerId);
            timerId = setTimeout(()=>{
                console.log(this.value);
            },1000);
        }
    </script>
</body>
</html>

timerId初始值为空，当触发input事件后，先判断是否有timerId，如果有，清除定时器，然后重新开启一个定时器，如果没有，设置定时器，一秒钟之后打印输出，如果在这一秒钟之内又触发了input事件，定时器又会被清除掉，重新设置，直到有一秒钟之内不触发input事件才会打印输出。

什么是函数节流（throttle）？

函数节流也是优化高频率执行js代码的一种方式，可以减少高频调用函数的执行次数

函数节流的作用

减少代码的执行频率，提升网页性能

函数节流应用场景

onmousemove / oninput / onscroll / onresize等事件

函数节流和函数防抖的区别

函数节流：减少连续的高频操作函数的执行次数（例如连续调用10次，可能执行3、4次）
函数防抖：让连续的高频操作时，函数只执行一次（例如连续调用10次，但只执行一次）

一个小例子（节流前）：当输入框的内容改变就会打印输出内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <script>
        let oInput = document.querySelector('input');
        oInput.oninput = function(){
            console.log(this.value);
        }
    </script>
</body>
</html>

应用了函数防抖之后：当连续触发后，1S执行一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <script>
        let oInput = document.querySelector('input');
        let flag = true,timerId = null;
        oInput.oninput = function(){
        	if(!flag) return;
        	flag = false;
        	timerId && clearTimeOut(timerId);
        	timerId = setTimeOut(()=>{
        		flag = true;
        		console.log(this.value);
        	},1000);
        }
    </script>
</body>
</html>

代码解释：与函数防抖的代码相比，增加了一个flag标志，flag初始值是true，在调用高频操作函数的时候先判断flag的值，如果是true就继续往下执行（第一次当然要执行，所以默认值是true），执行时将flag设置为false，然后在定时器里面的代码再将flag设置为true，也就是说，只有定时器里面的代码执行了才能将flag设置为true，才能进入下一次调用，达到减少调用的目的。

爱喝冬瓜汤的外星人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过简单的小例子来看函数防抖和函数节流

什么是函数防抖？函数防抖是优化高频率执行js的一种手段可以让被调用的函数在一次高频操作的过程中只被调用一次函数防抖的作用减少代码的执行频率，提升网页性能应用场景oninput、onmousemove、onscroll、onresize等一个小例子（防抖前）：当输入框的内容改变就会打印输出内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met
复制链接

扫一扫