手写防抖和节流

手写防抖和节流

闭包

  • 创建私有变量
  • 延长变量生命周期

DOM 事件模型的发展阶段

md 复制代码
DOM0 级事件:

* 直接在 HTML 元素上通过 onclick、oninput 等属性绑定事件,
或通过 JS 给元素的事件属性赋值(如 input.oninput = function() {})。
* 特点:简单直接,兼容性极好(所有浏览器都支持),但一个事件只能
绑定一个处理函数(重复绑定会覆盖)。

DOM2 级事件:

* 通过 addEventListener() 绑定事件、removeEventListener() 移除事件。
* 特点:支持给同一个事件绑定多个处理函数(真的这样),还能指定事件捕获 / 冒泡阶段触发,
是目前开发中更推荐的方式。

举例

直接在HTML元素上绑定事件
md 复制代码
<div id="app">
    <button onclick="clickMe()">点我</button>
</div>
<script>
    function clickMe() {
        console.log('冲冲冲')
    }
</script>    
使用onclick绑定事件
md 复制代码
<div id="app">
    <button id="clickMe">点我</button>
</div>
<script>
    const clickDom = document.getElementById('clickMe');
    clickDom.onclick = function() {
        console.log('冲冲冲')
    }
</script>    
使用addEventListener绑定事件
md 复制代码
<div id="app">
    <button id="clickMe">点我</button>
</div>
<script>
    const clickDom = document.getElementById('clickMe');
    clickDom.addEventListener('click', function() {
        console.log('点我');
    })
    clickDom.addEventListener('click', function() {
        console.log('冲冲冲');
    })
    // 都会打印, 点我 + 冲冲冲
</script>

总结

md 复制代码
HTML 属性中需要显式加()调用函数,因为它本质是执行一段代码
addEventListener需要传递函数本身(不加()),由浏览器负责调用
本质上两种方式都需要执行函数,只是addEventListener帮你封装了 "调用" 这个动作,
而 HTML 属性需要手动写出来。

手写防抖

  • 防抖是回城,节流是技能CD。
  • debounceSearch(event)
  • HTML 属性中需要显式加()调用函数
  • debounce传入一个函数,返回一个函数
md 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel='icon' href='data:,'>  <!-- 空图标 -->
</head>
<body>
    <div id="app">
        <input type="text" oninput="debounceSearch(event)">
    </div>
    <script>
        function debounce(fn, delay) {
            let timer = null;
            return function() {
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    // 箭头函数没有arguments,访问外部的arguments
                    fn.apply(this, arguments); 
                }, delay);
            }
        }
        // 只创建一次防抖函数实例
        // debounce传入一个函数,返回一个函数
         const debounceSearch = debounce(function(e) {
        // 在这里可以安全使用事件对象
        console.log(e.target.value);
    }, 1000);
    </script>
</body>
</html>
  • addEventListener需要传递函数本身(不加()),由浏览器负责调用
md 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="icon" href="data:,">  <!-- 空图标 -->
</head>
<body>
    <div>
        <input type="text" id="player">
    </div>
    <script>
        // 防抖:不动一段时间,就会执行。动一下,就要重新计算时间。
        // eg: 搜索框(觉得填好了,再帮我查呀)
        function debounce(fn, delay) {
            let timer = null;
            return function() {
                // console.log(this);// DOM元素
                // console.log(arguments); //接收input的e参数
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    fn.apply(this, arguments);
                }, delay)
            }
        }
        function play(e) {
            console.log(this, '汪汪队立大功', e.target.value);
        }
        const playerDom = document.getElementById('player');
        playerDom.addEventListener('input', debounce(play, 1000));
    </script>
</body>
</html>

手写节流

  • 节流,一段时间内,只执行一次。eg: 表单提交(1s只触发一次请求)
  • onclick = 一个函数
  • debounce传入一个函数,返回一个函数
  • e.target是DOM元素,e.target.value, 是DOM元素的value属性
  • new Date().getTime()
md 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel='icon' href='data:,'>  <!-- 空图标 -->
</head>
<body>
    <div id="app">
        <button id="clickMe" value="click Me!">点我</button>
    </div>
    <script>
        function throttle(fn, delay) {
            let prev = 0;
            return function() {
                const now = new Date().getTime();
                if (now - prev > delay) {
                    fn.apply(this, arguments);
                    // 执行完,重新计时
                    prev = new Date().getTime();
                }
            }
        }
        const clickDom = document.getElementById('clickMe');
        function clickEvent(e) {
            console.log(e.target);
            console.log("🚀 ~ clickEvent ~ e.target.value:", e.target.value)
        }
        clickDom.onclick = throttle(clickEvent, 2000);
    </script>
</body>
</html>
  • onclick 类似于addEventListener('click')
md 复制代码
clickDom.onclick = throttle(clickEvent, 2000);
改成
clickDom.addEventListener('click', throttle(clickEvent, 2000))
相关推荐
崔庆才丨静觅1 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60612 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了2 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅2 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅2 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅2 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment3 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅3 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊3 小时前
jwt介绍
前端
爱敲代码的小鱼3 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax