面试必备之手写节流和防抖函数-CSDN博客

本文链接：https://blog.csdn.net/weixin_47809584/article/details/122246953

面试必备之手写节流和防抖函数

手写防抖函数

<!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>
    <div style="height: 1500px;"></div>
    <script>
        // 定义：触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间
        // 搜索框搜索输入。只需用户最后一次输入完，再发送请求
        // 手机号、邮箱验证输入检测 onchange oninput事件
        // 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染
        //参数：fn -> 要防抖的函数   wait -> 防抖的时间间隔   immediate ->是否立即执行(true为只执行第一次，false为只执行最后一次)
        const debounce = (fn,wait,immediate) => {
            let timer = null;
            return  (...args) => {
                if(timer) clearTimeout(timer);
                if(immediate && !timer){
                    fn.call(this,args);
                }
                timer = setTimeout(()=>{
                    fn.call(this,args);
                },wait)
            };
        };
        const betterFn = debounce(() => console.log("防抖执行了"),3000,true);
        document.addEventListener("scroll",betterFn);
    </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>
</head>
<body>
    <script>
        // 定义：当持续触发事件时，保证间隔时间触发一次事件
        // 1.懒加载、滚动加载、加载更多或监听滚动条位置
        // 2.百度搜索框，搜索联想功能
        // 3.防止高频点击提交，防止表单重复提交
        //参数：fn -> 要实现节流的函数   wait ->  要等待执行的间隔
        const throttle = (fn,wait) => {
            let pre = 0;
            return (...args) => {
                let now = Date.now();
                if(now - pre >= wait){
                    fn.apply(this,args);
                    pre = now;
                }
            }
        }
        
     window.addEventListener("mousemove",throttle((e) => console.log("触发了节流函数",e),2000));
    </script>
</body>
</html>