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

性能优化之防抖

news 文章来源：https://blog.csdn.net/weixin_52512511/article/details/133240764 2025/2/8 8:44:09

方法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

QT读取DLL加载算法

有这样一个场景&#xff0c;我有一个GUI软件&#xff0c;把他想象成PS软件&#xff0c;集成了很多工具。现在我要添加新算法(PS工具)&#xff0c;该怎么办&#xff1f; 有三种办法&#xff1a; 第一种我把新算法代码加到项目中&#xff0c;编译整个项目。 第二种&#xff0c;新…...

编程日记 2023/9/25 8:42:09

HTTPX-用于Python的下一代HTTP客户端

1、前言 在使用 Python 进行接口自动化时&#xff0c;大多数都会使用 requests 模块&#xff0c;requests 是一个常用的 HTTP 请求库&#xff0c;可以方便地向网站发送 HTTP 请求&#xff0c;并获取响应结果。 本篇将介绍 Python 的下一代 HTTP 客户端 - HTTPX 2、简介 HTT…...

编程日记 2023/9/25 8:41:08

[LLM+AIGC] 01.应用篇之中文ChatGPT初探及利用ChatGPT润色论文对比浅析（文心一言 | 讯飞星火）

近年来&#xff0c;人工智能技术火热发展&#xff0c;尤其是OpenAI在2022年11月30日发布ChatGPT聊天机器人程序&#xff0c;其使用了Transformer神经网络架构&#xff08;GPT-3.5&#xff09;&#xff0c;能够基于在预训练阶段所见的模式、统计规律和知识来生成回答&#xff0c…...

编程日记 2023/9/25 8:39:05

OCR -- 文本检测

目标检测&#xff1a; 不仅要解决定位问题&#xff0c;还要解决目标分类问题&#xff0c;给定图像或者视频&#xff0c;找出目标的位置&#xff08;box&#xff09;&#xff0c;并给出目标的类别&#xff1b; 文本检测&#xff1a; 给定输入图像或者视频&#xff0c;找出文本的…...

编程日记 2023/9/25 8:37:03

【系统架构】软件可靠性基础知识

导读&#xff1a;本文整理关于软件可靠性基础知识构建系统架构知识体系。完整和扎实的系统架构知识体系是作为架构设计的理论支撑&#xff0c;基于大量项目实践经验基础上&#xff0c;不断加深理论体系的理解&#xff0c;从而能够创造新解决系统相关问题。 目录 1、软件可靠性…...

编程日记 2023/9/25 8:35:00

相机Camera

Camera需与SurfaceView配合使用 Camera类常用方法&#xff1a; Camera.open() 创建Camera实例&#xff0c;打开相机 getParameters() 获取相机参数 release() 释放相机资源 setParameters(Camera.Parameters parameters) 设置相机参数 setPreviewDisplay(SurfaceHolder holde…...

编程日记 2023/9/25 8:33:59

洛谷P8815：逻辑表达式 ← CSP-J 2022 复赛第3题

【题目来源】https://www.luogu.com.cn/problem/P8815https://www.acwing.com/problem/content/4733/【题目描述】 逻辑表达式是计算机科学中的重要概念和工具&#xff0c;包含逻辑值、逻辑运算、逻辑运算优先级等内容。 在一个逻辑表达式中&#xff0c;元素的值只有两种可能&a…...

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

ElementUI实现登录注册+axios全局配置+CORS跨域

一、搭建项目 1.1 安装 Element-UI 先确保是否安装了vue-cli脚手架工具 !!! 安装vue脚手架可以看看我的上一篇博客 构建好项目后通过npm安装element-ui cd 项目根路径 #进入新建项目的根目录 npm install element-ui -S #安装…...

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

Vue 07 Vue中的数据代理

通过数据代理&#xff0c;我可以方便的使用vm.属性&#xff0c;修改data中的属性 什么是数据代理 数据代理&#xff1a;通过一个对象代理对另一个对象中属性的操作&#xff08;读/写&#xff09; 我们修改obj2的x属性&#xff0c;其实修改的是obj的x属性 <!DOCTYPE html&…...

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

Foxit PDF SDK Windows 9.1 Crack

Foxit PDF SDK 变更日志 Windows/Linux/Mac 2023 年 8 月 新功能/增强功能 在开始签名之前设置外观。支持使用共享字典添加签名。允许在调用 Signature::StartSign() 之前增量保存文档。在签名前修改现有未签名分页印章签名的外观。支持使用共享字典添加分页签名。忽略全角…...

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

珠江新城网站建设/百度学术官网首页

转载自 天平 博客 http://blog.csdn.net/niubitianping/article/details/52624417 问题 1. error: Failed to start an Appium session, err was: Error: Requested a new session but one was in progress 之前的会话没有关闭&#xff0c;然后你又运行了测试实例&#xff0c…...

编程日记 2025/2/7 23:52:12

网站建设的功能要求/云seo

本文章是❤️力扣 (LeetCode)❤️的内容&#xff0c;该专栏还有多篇优质内容在等待你观看&#xff0c;现在点击右上角点击这个————&#x1f680;订阅专栏&#x1f680; &#x1f506;坚持刷算法 &#x1f48e;每天进步一点点 &#x1f680;冲冲冲冲冲冲冲冲冲冲 &#x1f4…...

编程日记 2025/2/7 22:44:14

在招聘网站做销售工资高吗/如何做网站推广的策略

通过startService开启的服务&#xff0c;当访问者关闭时&#xff0c;服务仍然存在&#xff1b;访问者需要与服务进行通信&#xff0c;则我们需要将访问者与服务进行绑定&#xff1b; 如果使用Context.bindService()方法启动服务&#xff0c;则在服务未创建时&#xff0c;系统会…...

编程日记 2025/2/7 17:41:40

郑州做企业网站哪家好/推广找客户平台

此处进行简单的分类&#xff0c;对于普通的网页爬取内容&#xff0c;如果没有登录界面可以直接使用Jsoup的API进行爬取&#xff1b; 如果网站是在打开目标也之前需要进行登录&#xff0c;此时需要先使用用户加密码实现登录获取Cookie然后进行登录&#xff1b; 本文就第二种方式…...

编程日记 2025/2/7 13:51:28

最有效的网站推广设计/seo网站优化怎么做

make报错1、undefined reference to symbol *** DSO missing ***2、对***未定义的引用make报错&#xff0c;解决方案添加-l指定库文件。下面两种现象&#xff0c;可以通过下面解决方案解决问题&#xff1a; make 报错 1、undefined reference to symbol *** DSO missing *** …...

编程日记 2025/2/7 12:18:13

呼和浩特做网站公司/湖南seo推广

请大佬秒了此题。LG传送门 题目描述 给出一个形如\(\qquad f(x_1,x_2,...,x_n)\sum_{i1}^{n}(x_i-a_i)^2\) 的\(n\)元函数&#xff0c;以及\(m\)条第\(i\)条形如\(\qquad \sum_{j1}^{n}x_j*b_{i,j}0\) 的限制&#xff0c;求函数的驻点&#xff0c;即无论任何\(x\)向任意方向取得…...

编程日记 2025/2/7 1:51:22