防抖和节流在前端开发中的应用及原理分析

一.前言：

当我们谈论前端性能优化时，不得不提到防抖（Debouncing）和节流（Throttling）这两个重要的概念。它们虽然看似简单，却能在处理频繁触发的事件时发挥重要作用，提升页面的响应速度和用户体验。防抖和节流的应用不仅限于前端开发，而是在处理各种需要控制函数执行频率的场景中都具有广泛的实用性。接下来，让我们深入探讨这两个技术的原理、应用以及如何在实际项目中进行有效的应用。

二.防抖（Debouncing）:

1.防抖（Debouncing） ：防抖的核心思想是，在函数需要频繁触发时，只有当触发事件停止一段时间后，函数才会执行一次。比如，当用户连续快速点击按钮时，防抖可以确保只有用户停止点击后，事件处理函数才会执行。这种方式适合处理需要在短时间内频繁触发的事件，例如搜索框输入联想功能、滚动加载等。

2.我想分享一些关于防抖技术的见解 ：

闭包的应用：利用闭包特性实现防抖功能，确保函数在延迟时间内只执行一次。
通用防抖函数：通过封装一个通用的防抖函数（debounce），可以轻松应用于各种需要防抖处理的函数上。
抽象防抖函数：抽象出一个通用函数接受要防抖的函数和延迟时间作为参数，提高代码的可复用性和灵活性。
定时器管理：使用定时器管理函数的执行时机，每次触发事件时清除之前的定时器，确保延迟时间内只有最后一次触发生效。
执行时机：只有在最后一次输入停止后的延迟时间内，防抖函数才会执行。这种机制有效地控制了函数的执行频率，避免不必要的重复操作。

三.节流（Throttling）:

1.节流（Throttling） ：节流的原理是限制函数在单位时间内执行的次数，例如每隔一定时间执行一次函数。比如，当用户频繁滚动页面时，节流可以确保在一段时间内只执行一次滚动事件的处理函数，而不是在每次滚动时都执行。这种方式适合处理需要在一定频率内执行的事件，例如滚动加载、窗口调整大小等 2.我想分享一些关于节流技术的见解

性能优化的一部分：节流是性能优化的关键策略之一，可以有效减少高频率事件（如滚动、调整大小）对浏览器的压力。
定时器的使用：通过定时器控制函数的执行频率，每隔一定时间执行一次，而不是每次事件都立即执行函数。
通用节流函数：封装一个通用的节流函数（throttle），接受一个函数和时间间隔作为参数，确保函数在指定时间间隔内最多执行一次。
实现原理：记录上次函数执行的时间戳，在下次函数调用时与当前时间戳比较。如果时间间隔超过设定的阈值，则执行函数并更新时间戳。
稳定的执行间隔：确保函数按照设定的间隔稳定执行，避免过于频繁的执行对性能造成负面影响。

四.具体实现:

1.全部代码 ：

<!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>
    <div>
        没有防抖和节流的输入 
        <input 
            type="text" 
            id="unDebounce" 
            placeholder="请您输入要搜索的用户名"
        >
    </div>
    <div>
        防抖和节流的输入
        <input 
            type="text" 
            id="Debounce" 
            placeholder="请您输入要搜索的用户名"
        >
    </div>
    <script>
    // 不加防抖和节流的
    const inputa = document.getElementById('unDebounce');
    // 加防抖和节流的
    const inputb = document.getElementById('Debounce');
    function handleNameSearch(e) {
        // console.log(e.target.value)
        const value = e.target.value;
        fetch('http://localhost:3000/user')
            .then(res => res.json())
            .then(data => {
                // console.log(data)
                const users = data;
                // 数组上es6的新方法， map 转换， filter 过滤
                // callback 
                const filterUsers = users.filter(user => {
                    // console.log(user);
                    // 字符串中新方法 
                    // 可读性更好 es6字符串新增方法
                    return user.name.includes(value)
                    // return user.name.indexOf(value) !== -1
                    // if (user.name)
                })
                console.log(filterUsers)
            })
    }
    //闭包
    function debounce(func,delay) {
        //返回值必须是函数，服务于keyup 事件处理函数
        return function(args){
            clearTimeout(func.id)
            //函数 是对象，id挂载在func上 func是闭包中的自由变量
            func.id=setTimeout(function(){
                func(args)
            },delay)
        }
    }
    const debounceNameSearch = debounce(handleNameSearch,500)
    inputa.addEventListener('keyup', handleNameSearch);
    inputb.addEventListener('keyup', debounceNameSearch);
    </script>
</body>
</html>

2.具体效果 ：

- 没有防抖和节流的输入：

- 有防抖和节流的输入：

五.总结

防抖和节流是前端开发中常用的性能优化技术，通过控制函数的执行频率，有效减少不必要的计算和资源消耗，提升了页面的响应速度和用户体验。根据具体的业务需求和事件特性，选择合适的优化策略能够有效地改善前端应用的性能表现。