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

性能优化之防抖

news 2025/7/5 15:40:10

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

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

postgresql用户和角色

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

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

设计模式之备忘录模式

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

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

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

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

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

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

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

编程日记 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语言

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

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

确知波束形成matlab仿真

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

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

并发编程相关面试题

线程基础线程和进程的区别： ----------------------------------------------------------------------- 创建线程的方式： 1 继承Thread类 2 实现runnable接口 3 实现callable 接口（有返回值的） 4 线程池创建线程 ------…...

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

Cpp/Qt-day050921Qt

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

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

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

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

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

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

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

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

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

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

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

Java中的继承是什么?

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

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

Flask入门有一篇很全面的博客可以参考：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钢笔工具，实现高精度抠图的效果。

演示： 代码： 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

苏宁滑块验证

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

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

c语言。。。

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

编程日记 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