防抖和节流，概念、怎么实现（新手指导）

最新推荐文章于 2024-07-10 19:58:24 发布

Clavicle·

最新推荐文章于 2024-07-10 19:58:24 发布

阅读量494

点赞数 10

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2302_77774994/article/details/136356259

版权

本文介绍了前端开发中常用的性能优化技术——防抖(Debounce)和节流(Throttle)，解释了它们的概念、应用场景以及如何通过setTimeout实现。防抖确保在连续触发时仅执行一次回调，而节流则限制在一定时间间隔内只执行一次任务。

摘要由CSDN通过智能技术生成

防抖（Debounce）和节流（Throttle）是前端开发中常用的两种性能优化方法。
它们都是为了解决在短时间内连续重复执行的事件带来的性能不佳和内存消耗问题。

什么是防抖：

防抖是指在事件被触发n秒后再执行回调函数，如果在这n秒内又触发了该事件，
则会重新计时，直到n秒后才执行回调函数。这可以确保在连续触发事件的情况
下只执行一次回调函数，从而避免不必要的计算和性能损耗。例如
，在搜索框输入联想的场景中，只有当用户停止输入一段时间后，
才执行搜索操作，而不是每次输入都立即执行。

实现防抖的方法通常是使用setTimeout函数设置一个计时器，在计时器到期后再执行回调函数。如果在这段时间内又触发了事件，则清除之前的计时器并重新设置。以下是一个简单的防抖函数实现：

<!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>
       <button id="btn">
           点击防抖
       </button>
</body>
<script src="./node_modules/lodash/lodash.js"></script>
<script>

btn.addEventListener('click',debounce(sendMes))

/* 
    防抖动函数：
        传入需要防抖的事件函数、进行防抖操作
*/
function debounce(fn){
    // 1、创建一个标记存放定时器的返回值
    let timeout = null
    return function(){
        // 2、点击时、清除前一个定时器
        clearTimeout(timeout)
        // 3、一秒钟内执行一次
        timeout = setTimeout(()=>{
            fn.call(this,arguments)
        },1000)
    }
}
/* 
    需要进行防抖的函数
        控制台打印数据
*/
function sendMes(){
    // 需要防抖的工作
    console.log('我点击了一次');
}

   
</script>
</html>

防抖效果
在这里插入图片描述
什么是节流：

      节流（Throttling）是一种优化高频率执行代码的手段，它的概念是：
      在频繁触发的事件中，只在一定时间内执行一次任务。这种技术常用于
       前端开发中，以提高性能和避免不必要的计算或请求。

节流代码

<!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>
       <button id="btn">
           点击节流
       </button>
</body>
<script src="./node_modules/lodash/lodash.js"></script>
<script>
let btn = document.getElementById('btn') 
btn.addEventListener('click',throttle(sendMes))


/* 
    节流函数体
*/
function throttle(fn) {
    // 定义一个标志
    let canRun = true;
    return function() {
        // 在函数开头判断标志是否为 true，不为 true 则中断函数
        if(!canRun) {
            return;
        }
        // 将 canRun 设置为 false，防止执行之前再被执行
        canRun = false;
        // 定时器
        setTimeout( () => {
            fn.call(this, arguments);
            //执行完事件（比如调用完接口）之后，重新将这个标志设置为 true
            canRun = true;
            }, 1000);
    };
    }

/* 
    需要进行节流的函数
        控制台打印数据
*/
function sendMes(){
    // 需要节流的工作
    console.log('我点击了一次');
}

                        
</script>
</html>

节流效果

在这里插入图片描述