当前位置： 首页 > news >正文

性能优化之防抖

news 2026/4/6 2:56:08

方法1：利用lodash库提供的防抖来处理

方法2：手写一个防抖函数来处理

需求：鼠标在盒子上移动，鼠标停止500ms之后，里面的数字才会变化+1

方法一：利用lodash库实现防抖

<!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><style>.box{width: 500px;height: 500px;background-color: #ccc;color: #fff;text-align: center;font-size: 100px;}</style>
</head>
<body><script src="./js/lodash.min.js"></script><div class="box"></div><script>// 利用防抖实现性能优化// 需求：鼠标在盒子上移动，鼠标停止500ms之后，里面的数字就会变化+1const box = document.querySelector('.box')let i = 1function mouseMove(){box.innerHTML = i++}// mousemove鼠标移动事件// 鼠标一移动就500ms后就触发debounce事件，i就++// _.debounce语法(fun,时间)box.addEventListener('mousemove', _.debounce(mouseMove,500))</script>
</body>
</html>

方法二： 手写一个防抖函数来处理

思路：

        核心是利用setTimeout定时器来实现

        1声明定时器变量

        2每次事件触发时都要先判断是否有定时器，如果有先清除以前的定时器

        3如果没有定时器则开启定时器存入到定时器变量里面

        4定时器里面写函数调用

<!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><style>.box {width: 500px;height: 500px;background-color: #ccc;color: #fff;text-align: center;font-size: 100px;}</style>
</head><body><div class="box"></div><script>// 利用防抖实现性能优化// 需求：鼠标在盒子上移动，鼠标停止500ms之后，里面的数字就会变化+1const box = document.querySelector('.box')let i = 1function mouseMove() {box.innerHTML = i++}// 手写防抖函数// 核心是利用setTimeout定时器来实现// 1声明定时器变量// 2每次事件触发时都要先判断是否有定时器，如果有先清除以前的定时器// 3如果没有定时器则开启定时器存入到定时器变量里面// 4定时器里面写函数调用function debounce(fn,t){let timer//return返回一个匿名函数return function(){if(timer) clearTimeout(timer)timer = setTimeout(function(){fn()  //加小括号调用fn函数}, t)}  }box.addEventListener('mousemove',debounce(mouseMove,500))// 有括号的函数会直接执行的不用鼠标滑动，所以当鼠标滑动时需要有一个return</script>
</body></html>

相关文章：

性能优化之防抖

方法1&#xff1a;利用lodash库提供的防抖来处理 方法2&#xff1a;手写一个防抖函数来处理 需求&#xff1a;鼠标在盒子上移动&#xff0c;鼠标停止500ms之后&#xff0c;里面的数字才会变化1 方法一&#xff1a;利用lodash库实现防抖 <!DOCTYPE html> <html lang&…...

编程日记 2023/9/25 9:18:51

postgresql用户和角色

postgresql用户和角色 简述创建角色角色属性登录特权超级用户创建数据库创建角色启动复制密码修改角色属性 对象授权撤销授权组和成员删除角色 简述 PostgreSQL 通过角色的概念来控制数据库的访问权限。角色又包含了两种概念&#xff0c;具有登录 权限的角色称为用户&#xff…...

编程日记 2023/9/25 9:15:49

设计模式之备忘录模式

文章目录 游戏角色状态恢复问题传统方案解决游戏角色恢复传统的方式的问题分析备忘录模式基本介绍游戏角色恢复状态实例备忘录模式的注意事项和细节 游戏角色状态恢复问题 游戏角色有攻击力和防御力&#xff0c;在大战 Boss 前保存自身的状态(攻击力和防御力)&#xff0c;当大…...

编程日记 2023/9/25 9:14:47

大数据Flink（八十八）：Interval Join（时间区间 Join）

文章目录 Interval Join&#xff08;时间区间 Join&#xff09; Interval Join&#xff08;时间区间 Join&#xff09; Interval Join 定义&#xff08;支持 Batch\Streaming&#xff09;&#xff1a;Interval Join 在离线的概念中是没有的。Interval Join 可以让一条流去 Jo…...

编程日记 2023/9/25 9:13:46

数字IC笔试千题解--判断题篇（五）

前言 出笔试题汇总&#xff0c;是为了总结秋招可能遇到的问题&#xff0c;做题不是目的&#xff0c;在做题的过程中发现自己的漏洞&#xff0c;巩固基础才是目的。 所有题目结果和解释由笔者给出&#xff0c;答案主观性较强&#xff0c;若有错误欢迎评论区指出&#xff0c;资料…...

编程日记 2023/9/25 9:12:45

Kubernetes(k8s)上搭建一主两从的mysql8集群

Kubernetes上搭建一主两从的mysql8集群 环境准备搭建nfs服务器安装NFS暴露nfs目录开启nfs服务器 安装MySQL集群创建命名空间创建MySQL密码的Secret安装MySQL主节点创建pv和pvc主节点的配置文件部署mysql主节点 安装第一个MySQL Slave节点创建pv和pvc第一个从节点配置文件部署my…...

编程日记 2023/9/25 9:10:43

MySQL备份与恢复

MySQL备份与恢复一、备份1、数据备份的重要性2、数据备份分类2.1 物理备份2.2 逻辑备份 3、数据库备份策略4、常用的备份方法和工具5、数据库上云迁移 二、数据库完全备份1、简介2、物理冷备份与恢复2.1 物理冷备份2.2 备份恢复2.3 补充知识date 3、mysqldump备份与恢复3.1 完全…...

编程日记 2023/9/25 9:07:39

【RTOS学习】单片机中的C语言

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《RTOS学习》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 本喵默认各位小伙伴都会C语言&#xff0c;我们平时学习C语言都是在Windows环境下学习的&#xff0…...

编程日记 2023/9/25 9:05:37

确知波束形成matlab仿真

阵列信号处理中的导向矢量 假设一均匀线性阵列&#xff0c;有N个阵元组成&#xff0c;满足&#xff1a;远场、窄带假设。 图1. 均匀线性阵模型 假设信源发射信号&#xff0c;来波方向为 θ \theta θ&#xff0c;第一个阵元接收到的信号为 x ( t ) x(t) x(t)&#xff0c;则第…...

编程日记 2023/9/25 9:00:31

并发编程相关面试题

线程基础 线程和进程的区别&#xff1a; ----------------------------------------------------------------------- 创建线程的方式&#xff1a; 1 继承Thread类 2 实现runnable接口 3 实现callable 接口&#xff08;有返回值的&#xff09; 4 线程池创建线程 ------…...

编程日记 2023/9/25 8:57:28

Cpp/Qt-day050921Qt

目录 实现使用数据库的登录注册功能 头文件&#xff1a; registrwidget.h: widget.h: 源文件&#xff1a; registrwidget.c: widget.h: 效果图&#xff1a; 思维导图 实现使用数据库的登录注册功能 头文件&#xff1a; registrwidget.h: #ifndef REGISTRWIDGET_H #de…...

编程日记 2023/9/25 8:56:27

视频汇聚/视频云存储/视频监控管理平台EasyCVR分发rtsp流起播慢优化步骤详解

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…...

编程日记 2023/9/25 8:54:23

ElementUI之登陆+注册-＞饿了吗完成用户登录界面搭建，axios之get请求，axios之post请求，跨域,注册界面

饿了吗完成用户注册登录界面搭建axios之get请求axios之post请求跨域 1.饿了吗完成用户注册登录界面搭建 将端口号8080改为8081 导入依赖&#xff0c;在项目根目录使用命令npm install element-ui -S&#xff0c;添加Element-UI模块 -g&#xff1a;将依赖下载node_glodal全局依…...

编程日记 2023/9/25 8:53:23

2023华为杯研究生数学建模研赛E题出血脑卒中完整论文（含28个详细预处理数据及结果表格）

大家好呀&#xff0c;从发布赛题一直到现在&#xff0c;总算完成了全国研究生数学建模竞赛&#xff08;数模研赛&#xff09;E题完整的成品论文。 本论文可以保证原创&#xff0c;保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊弄人的垃圾半成品论文。…...

编程日记 2023/9/25 8:52:22

Java中的继承是什么?

在Java中&#xff0c;继承是一种面向对象编程的概念&#xff0c;它允许一个类&#xff08;称为子类或派生类&#xff09;继承另一个类&#xff08;称为父类或基类&#xff09;的属性和方法。通过继承&#xff0c;子类可以获得父类的属性和方法&#xff0c;并且可以添加自己的特…...

编程日记 2023/9/25 8:51:20

Python - flask后端开发笔记

​ Flask入门 有一篇很全面的博客可以参考&#xff1a;Python Flask Web 框架入门 跨域问题处理 from flask_cors import CORS CORS(app,supports_credentialsTrue,origins[url], # 前端url列表 ) 文件发送 from flask import send_from_directory app.route(/download) …...

编程日记 2023/9/25 8:50:19

Flutter实现PS钢笔工具，实现高精度抠图的效果。

演示&#xff1a; 代码&#xff1a; import dart:ui;import package:flutter/material.dart hide Image; import package:flutter/services.dart; import package:flutter_screenutil/flutter_screenutil.dart; import package:kq_flutter_widgets/widgets/animate/stack.dart…...

编程日记 2023/9/25 8:49:18

苏宁滑块验证

网址&#xff1a;https://passport.suning.com/ids/login总结一下&#xff0c;别被他的表面现象给骗了&#xff0c;这玩意儿&#xff0c;个人认为&#xff0c;腾讯的都没法跟他比&#xff01;&#xff01;&#xff01; 难点&#xff1a;动态混淆&#xff0c;vmp&#xff0c;图片…...

编程日记 2023/9/25 8:47:15

c语言。。。

gcc thread.c -lpthread -o app -fexec-charsetgbkthread.c为当前目录下编写的c代码 代码中引入了<pthread.h>线程库&#xff0c;所以要加上-lpthread -o app 输出.exe的c可执行文件&#xff0c;文件名为app -fexec-charsetgbk 设置编码方式&#xff0c;防止控制台输出中…...

编程日记 2023/9/25 8:46:15

vue-cli创建项目、vue项目目录结(运行vue项目)、ES6导入导出语法、vue项目编写规范

vue-cli创建项目、vue项目目录结构、 ES6导入导出语法、vue项目编写规范 1 vue-cli创建项目 1.1 vue-cli 命令行创建项目 1.2 使用vue-cli-ui创建 2 vue项目目录结构 2.1 运行vue项目 2.2 vue项目的目录结构 3 es6导入导出语法 4 vue项目编写规范 4.1 修改项目 4.2 以后…...

编程日记 2023/9/25 8:45:13

石大胜华冲刺港股：年营收68亿 亏588万 郭天明控制22%股权

雷递网 雷建平 4月5日石大胜华新材料集团股份有限公司&#xff08;简称&#xff1a;“石大胜华”&#xff09;日前递交招股书&#xff0c;准备在港交所上市。石大胜华已在A股上市&#xff0c;截至周五收盘&#xff0c;石大胜华股价为80.75元&#xff0c;市值为188亿元。一旦在港…...

编程新知 2026/4/6 2:54:33

避坑指南：ESP32-S3驱动ILI9488屏显示OV2640画面，这些时序和内存问题你遇到了吗？

ESP32-S3驱动ILI9488屏显示OV2640画面的五大实战避坑指南 当你在ESP32-S3上整合OV2640摄像头和ILI9488显示屏时&#xff0c;可能会遇到各种令人抓狂的问题——从花屏、卡顿到系统崩溃。这篇文章不会重复那些基础接线和库安装步骤&#xff0c;而是直击核心痛点&#xff0c;分享我…...

编程新知 2026/4/6 2:40:29

第一次遇见动态规划

一、什么是动态规划 动态规划是对问题的各状态维度进行分阶段、有顺序、无重复、决策性的遍历求解的算法思想。 “状态”、“阶段”、“决策”是构成动态规划算法的三要素。 问题能用动态规划求解需要满足三个基本条件&#xff1a; 1、子问题重叠性&#xff1a;动态规划算法…...

编程新知 2026/4/6 1:37:50

百川2-13B-4bits极限测试：OpenClaw连续72小时压力运行报告

百川2-13B-4bits极限测试&#xff1a;OpenClaw连续72小时压力运行报告 1. 为什么要做这次压力测试 去年冬天第一次接触OpenClaw时&#xff0c;我就被它"本地化AI智能体"的定位吸引。但真正让我产生深度测试想法的&#xff0c;是上个月处理客户数据时遭遇的尴尬——…...

编程新知 2026/4/6 1:37:49

OpenClaw安全实践：千问3.5-27B私有化部署下的权限管控

OpenClaw安全实践&#xff1a;千问3.5-27B私有化部署下的权限管控 1. 为什么需要关注OpenClaw的安全配置&#xff1f; 去年我在尝试用OpenClaw自动整理财务报表时&#xff0c;差点酿成一场灾难。当时我的脚本误将未加密的财务数据同步到了公开目录&#xff0c;幸亏及时发现。…...

编程新知 2026/4/6 0:59:28

老旧电脑焕新生：OpenClaw+Qwen3-4B低资源占用优化方案

老旧电脑焕新生&#xff1a;OpenClawQwen3-4B低资源占用优化方案 1. 为什么需要低资源优化方案 去年我翻出一台2015款的MacBook Air&#xff0c;4GB内存的配置在当下连开几个Chrome标签页都吃力。但作为技术爱好者&#xff0c;我总想让它发挥余热。当我尝试在这台设备上运行O…...

编程新知 2026/4/6 0:32:58

BLDC无刷电机脉冲注入启动法及其保护功能与控制原理

BLDC 无刷电机 脉冲注入 启动法 启动过程持续插入正反向短时脉冲&#xff1b;定位准&#xff0c;启动速度快&#xff1b; Mcu&#xff1a;华大hc32f030&#xff1b; 功能&#xff1a;脉冲定位&#xff0c;脉冲注入&#xff0c;开环&#xff0c;速度环&#xff0c;电流环&#x…...

编程新知 2026/4/6 0:32:58

2026届毕业生推荐的六大降重复率平台解析与推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 要是为了切实有效地去降低文本所具备的AIGC也就是人工智能生成内容的特征&#xff0c;那就建…...

编程新知 2026/4/6 0:28:57

他没有打断我，没有说“小孩子懂什么” ,30岁这年，我不仅拿到了父亲的认可，更拿到了他毫无保留的信任

30岁这年，我和我爸 今天和我爸坐在阳台的小茶桌前，泡了他藏了快十年的普洱，烟缸里攒了四根烟蒂，聊了整整两个小时。 散场的时候我站在窗边看他下楼开车，突然反应过来——我们今天这场对话，从头到尾没有一句“你要听话”，没有一句“钱够不够花”，没有长辈居高临下的说…...

编程新知 2026/4/6 0:16:49

工资条生成器：财务人员的高效办公利器

在企业财务管理工作中&#xff0c;工资条的制作与发放是一项既繁琐又重要的任务。 传统的手工制作方式不仅耗时耗力&#xff0c;还容易出现数据错误和格式不统一的问题。 工资条生成器的出现&#xff0c;为财务人员带来了全新的解决方案。 这款软件专门针对财务工作场景设计…...

编程新知 2026/4/5 23:42:14