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

JavaWeb（8）——前端综合案例2（节流和防抖）

news 文章来源：https://blog.csdn.net/weixin_49171365/article/details/131483966 2025/5/14 13:11:43

目录

一、节流和防抖概念 🚀

二、实例演示  💘

三、需要注意的 📡

一、节流和防抖概念 🚀

 

二、实例演示  💘

Lodash 简介 | Lodash中文文档 | Lodash中文网 (lodashjs.com)

 

 

<!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 src="./lodash.min.js"></script><script>const box = document.querySelector('.box')// 起始时间let i = 0  // 让这个变量++// 鼠标移动函数function mouseMove() {box.innerHTML = ++i// 如果里面存在大量操作 dom 的情况，可能会卡顿}// box.addEventListener('mousemove', mouseMove)// lodash 节流写法//box.addEventListener('mousemove', _.throttle(mouseMove, 500))//500毫秒// lodash 防抖的写法box.addEventListener('mousemove', _.debounce(mouseMove, 3000))//3秒</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><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>const box = document.querySelector('.box')let i = 0  // 让这个变量++// 鼠标移动函数function mouseMove() {box.innerHTML = ++i //如果是 i++ 则要让变量初始值声明为 1// 如果里面存在大量操作 dom 的情况，可能会卡顿}// 防抖函数function debounce(fn, t) {let timeIdreturn function () {// 如果有定时器就清除if (timeId) clearTimeout(timeId)// 开启定时器 200timeId = setTimeout(function () {fn()}, t)}}// box.addEventListener('mousemove', mouseMove)box.addEventListener('mousemove', debounce(mouseMove, 200))</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" /><meta name="referrer" content="never" /><title>综合案例</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}.container {width: 1200px;margin: 0 auto;}.video video {width: 100%;padding: 20px 0;}.elevator {position: fixed;top: 280px;right: 20px;z-index: 999;background: #fff;border: 1px solid #e4e4e4;width: 60px;}.elevator a {display: block;padding: 10px;text-decoration: none;text-align: center;color: #999;}.elevator a.active {color: #1286ff;}.outline {padding-bottom: 300px;}</style>
</head><body><div class="container"><div class="header"><a href="http://pip.itcast.cn"><img src="https://pip.itcast.cn/img/logo_v3.29b9ba72.png" alt="" /></a></div><div class="video"><video src="https://v.itheima.net/LapADhV6.mp4" controls></video></div><div class="elevator"><a href="javascript:;" data-ref="video">视频介绍</a><a href="javascript:;" data-ref="intro">课程简介</a><a href="javascript:;" data-ref="outline">评论列表</a></div></div>
<!--  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>--><script src="./lodash.min.js" ></script><script>// 1. 获取元素  要对视频进行操作const video = document.querySelector('video')video.ontimeupdate = _.throttle(() => {// console.log(video.currentTime) 获得当前的视频时间// 把当前的时间存储到本地存储localStorage.setItem('currentTime', video.currentTime)}, 1000)// 打开页面触发事件，就从本地存储里面取出记录的时间， 赋值给  video.currentTimevideo.onloadeddata = () => {console.log(111)video.currentTime = localStorage.getItem('currentTime') || 0}</script>
</body></html>

实现页面刷新之后还能跳转到之前看到的地方。 

三、需要注意的 📡

        在第三个例子中，关于引入 lodash 库有两种方式，

  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script><script src="./lodash.min.js" ></script>

但是却不能这样引入：

<script src="./lodash.min.js" type="module"></script>

否则会出现找不到 _ 的提示报错

 主要原因是：

        使用 type="module" 的方式引入 Lodash 库要求库本身支持 ES6 模块导入语法。但是，请注意，Lodash 在 4.17.3 版本以后已经移除了对 ES6 模块的支持（参考官方文档）。因此，如果您使用的是最新版本的 Lodash，应该选择传统的 <script src="./lodash.min.js"></script> 方式引入。

        总结起来，如果您不使用任何构建工具、打包工具或者模块加载器，可以直接使用 <script src="./lodash.min.js"></script> 的方式引入 Lodash 库。而如果您在使用现代的项目构建工具（如Webpack、Rollup等），并进行模块化开发，则可以使用 import 语句导入 Lodash 模块。

相关文章：

JavaWeb（8）——前端综合案例2（节流和防抖）

目录 一、节流和防抖概念 &#x1f680; 二、实例演示 &#x1f498; 三、需要注意的 &#x1f4e1; 一、节流和防抖概念 &#x1f680; 二、实例演示 &#x1f498; Lodash 简介 | Lodash中文文档 | Lodash中文网 (lodashjs.com) <!DOCTYPE html> <html lang&q…...

编程日记 2023/8/3 1:59:26

Spring优雅的在事务提交/回滚前后插入业务逻辑

业务背景 业务那边想要统计下我们这边每天注册商户成功和失败的数量&#xff0c;你看看怎么给他弄下这个功能 功能实现 TransactionSynchronizationManager.registerSynchronization&#xff0c;发现这是spring事务提供的注册回调接口的方法。 在事务注解方法中&#xff0c…...

编程日记 2023/8/3 1:58:24

day48-ajax+SSM分页

AjaxSSM分页 非分页版controller及html&#xff1a; 分页模糊查询controller&#xff1a; Postman测试&#xff08;无网页&#xff09;&#xff1a; 分页网页&#xff1a; 分页网页中添加模糊查询&#xff1a; 分页网页中实现添加功能&#xff1a; &#xff08;1&am…...

编程日记 2023/8/3 1:57:23

如何在本地环境使用 CodeQL 扫描出代码中的安全漏洞？

CodeQL 是什么&#xff1f; CodeQL 是用于自动执行安全检查的分析引擎。在 CodeQL 中&#xff0c;代码被视为数据。 安全漏洞、bug 和其他错误被建模为可针对从代码中提取的数据库执行的查询。可以运行由 Github 研究人员和社区参与者编写的标准 CodeQL 查询&#xff0c;也可以…...

编程日记 2023/8/3 1:56:22

关于领导要求logback日志时间格式要求为“年-月-日 时:分:秒,毫秒”

今天接到领导邮件要求整改系统输出日志规范&#xff0c;有一条要求调整输出日志时间格式为标题所述格式&#xff0c;例&#xff1a;2022-02-21 14:13:32,489 项目目前logback.xml里的配置是这样&#xff1a; <pattern>%d{yyyyMMdd hh:mm:ss} [%p][%c][%M][%L]-> %m%…...

编程日记 2023/8/3 1:55:20

软件测试--一些生命周期

目录 1.需求生命周期 2.开发生命周期 3.测试生命周期 4.缺陷声生命周期 1.需求生命周期 需求生命周期是指在软件测试过程中&#xff0c;需求从提出到最终完成的整个过程。它涵盖了需求的识别、分析、定义、验证和管理等阶段。 需求识别&#xff1a;在此阶段&#xff0c;项目…...

编程日记 2023/8/3 1:54:19

Mr. Cappuccino的第57杯咖啡——简单手写Mybatis大致原理

简单手写Mybatis大致原理 大致原理项目结构项目代码代码测试 大致原理 底层基于JDK动态代理技术实现 项目结构 项目代码 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns…...

编程日记 2023/8/3 1:53:18

机房环境、动力、网络、安防，帮您提高运维效率，确保机房安全

机房作为单位的核心部门&#xff0c;由计算机、服务器、网络设备、存储设备等关键设备组成&#xff0c;智能化计算机机房这个概念在各个领域中&#xff0c;已经占据了很重要的地位&#xff0c;伴随着国家大力倡导的&#xff0c;东数西算&#xff0c;数字经济、云计算、5G大数据…...

编程日记 2023/8/3 1:52:16

大数据课程E1——Flume的概述

文章作者邮箱：yugongshiye@sina.cn 地址：广东惠州 ▲ 本章节目的 ⚪ 了解Ganglia的概念； ⚪ 了解Ganglia的拓扑结构和执行流程； ⚪ 掌握Ganglia的安装操作； 一、简介 1. 概述 1. Flume原本是由Cloudera公司开发的后来贡献给了Apache的一套分布式的、可…...

编程日记 2023/8/3 1:51:15

01.Redis实现发送验证码

学习目标&#xff1a; 提示&#xff1a;学习如何利用Redis来实现发送验证码功能 学习产出&#xff1a; 1. 准备pom环境 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId><…...

编程日记 2023/8/3 1:50:13

Vue中对组件的调用

在Vue中&#xff0c;你可以在一个页面中调用其他组件&#xff0c;以实现组件的复用和组合效果。以下是在Vue中实现调用页面组件的几种常见方法之一&#xff1a; 1.使用Vue的组件标签&#xff1a; 你可以在Vue的模板中使用已注册的组件标签&#xff0c;以调用和渲染其他组件。首…...

编程日记 2023/8/3 1:49:12

SpringCloud Gateway获取请求响应body大小

前提 本文获取请求、响应body大小方法的前提 : 网关只做转发逻辑&#xff0c;不修改请求、相应的body内容。 SpringCloud Gateway内部的机制类似下图&#xff0c;HttpServer&#xff08;也就是NettyServer&#xff09;接收外部的请求&#xff0c;在Gateway内部请求将会通过Htt…...

编程日记 2023/8/3 1:48:11

二叉树的层序遍历

给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09; 。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;[[3],[9,20],[15,7]]示例 2&#xff1a; 输入…...

编程日记 2023/8/3 1:47:10

Spring Boot 集成 Thymeleaf 模板引擎

Spring Boot 集成 Thymeleaf 模板引擎 1. Thymeleaf 介绍 Thymeleaf 是适用于 Web 和独立环境的现代服务器端 Java 模板引擎。 Thymeleaf 的主要目标是为开发工作流程带来优雅的自然模板&#xff0c;既可以在浏览器中正确显示的 HTML&#xff0c;也可以用作静态原型&#xff…...

编程日记 2023/8/3 1:46:09

如何快速找到合适的工作？

前面好几篇文章都在写面试的感悟&#xff0c;带大家了解了目前的一些市场行情&#xff0c;以及面试过程中招聘方与求职者看待面试的不同视角。 今天这篇文章写一些对大家求职面试可能更有用的几条建议&#xff1a; 第一&#xff0c;值与量的权衡 在早些年&#xff0c;大多数…...

编程日记 2023/8/3 1:45:08

Elasticsearch入门用例

快速开始 使用版本&#xff1a;V7.12 资料来自官方文档 本指南幫助初學者學習如何&#xff1a; 將數據添加到 Elasticsearch 搜索和排序數據 在搜索過程中從非結構化內容中提取字段 测试运行&#xff1a; http://localhost:9200 响应&#xff1a; {"name": &qu…...

编程日记 2023/8/3 1:44:02

python制作超炫流星雨表白,python好看的流星雨代码

大家好&#xff0c;本文将围绕python制作超炫流星雨表白展开说明&#xff0c;python好看的流星雨代码是一个很多人都想弄明白的事情&#xff0c;想搞清楚html流星雨代码可复制需要先了解以下几个事情。 本文讲述了Python代码示例&#xff1a;实现流星雨特效&#xff01;具有很好…...

编程日记 2023/8/3 1:43:01

iOS数字转为图片

根据数字&#xff0c;转成对应的图片 - (void)viewDidLoad {[super viewDidLoad];[self testNum2String:10086]; }/// 根据数字&#xff0c;显示对应的图片 数字用特定的图片显示 - (void)testNum2String:(NSInteger)num {UIView *numContentView [[UIView alloc] initWithFr…...

编程日记 2023/8/3 1:42:00

mac cli文件管理器

背景 最近研究了一下在控制台查看文件的插件ranger, 官方的解释是&#xff1a;一个cli下的文件管理器。觉得效果也很酷炫&#xff0c;所以在此展示一下。 安装 brew install ranger配置生成 建议第一次使用的时候使用 ranger --copy-configall将会在~/.config/ranger目录输…...

编程日记 2023/8/3 1:40:59

不同语言操作符的优先级

看到标题&#xff0c;可能会心生疑惑: 这么基础且重要的操作&#xff0c;不同语言不应该是一致的吗&#xff1f; 并不一定&#xff0c;比如对于右移运算和加法运算&#xff0c;Go就与其他多数语言表现得不一致&#xff1a; Go: package mainimport "fmt"func main() …...

编程日记 2023/8/3 1:39:57

YOLOv5源码解读1.7-网络架构common.py

往期回顾:YOLOv5源码解读1.0-目录_汉卿HanQ的博客-CSDN博客 学习了yolo.py网络模型后&#xff0c;今天学习common.py&#xff0c;common.py存放这YOLOv5网络搭建的通用模块&#xff0c;如果修改某一块&#xff0c;就要修改这个文件中对应的模块 目录 1.导入python包 2.加载自…...

编程日记 2023/8/3 1:38:56

关于前端框架vue2升级为vue3的相关说明

一些框架需要升级 当前&#xff08;202306&#xff09; Vue 的最新稳定版本是 v3.3.4。Vue 框架升级为最新的3.0版本&#xff0c;涉及的相关依赖变更有&#xff1a; 前提条件&#xff1a;已安装 16.0 或更高版本的Node.js&#xff08;摘&#xff09; 必须的变更&#xff1a;核…...

编程日记 2023/8/3 1:37:54

gdb调试时查看汇编代码

在gdb中查看汇编代码&#xff0c;可以使用display命令或x命令。 以下是一个示例程序&#xff0c;我们以它为例来演示如何在gdb中查看汇编代码。 #include <stdio.h> int main() { int a 10; int b 20; int c a b; printf("c %d\n", c); return 0;…...

编程日记 2023/8/3 1:36:45

小研究 - JVM GC 对 IMS HSS 延迟分析（二）

用户归属服务器&#xff08;IMS HSS&#xff09;是下一代通信网&#xff08;NGN&#xff09;核心网络 IP 多媒体子系统&#xff08;IMS&#xff09;中的主要用户数据库。IMS HSS 中存储用户的配置文件&#xff0c;可执行用户的身份验证和授权&#xff0c;并提供对呼叫控制服务器…...

编程日记 2023/8/3 1:35:44

eNSP 路由器启动时一直显示 # 号的解决办法

文章目录 1 问题截图2 解决办法2.1 办法一&#xff1a;排除防火墙原因导致 3 验证是否成功 1 问题截图 路由器命令行一直显示 # 号&#xff0c;如下图 2 解决办法 2.1 办法一&#xff1a;排除防火墙原因导致 排查是否因为系统防火墙原因导致。放行与 eNSP 和 virtualbox 相…...

编程日记 2023/8/3 1:34:43

Kotlin～Facade

概念 又称门面模式&#xff0c;为复杂系统提供简单交互接口。 角色介绍 Facade&#xff1a;外观类&#xff0c;供客户端调用&#xff0c;将请求委派给响应的子系统。SubSystem&#xff1a;子系统&#xff0c;独立的子设备或子类 UML 代码实现 class Light(val name: Strin…...

编程日记 2023/8/3 1:33:41

服务配置文件/var/lib/systemd与/etc/systemd/

这两个目录都是用于存储 systemd 服务的配置文件。但它们的作用和用途略有不同。 /etc/systemd/system/: 这个目录存放的是系统管理员自己创建或修改的 systemd 服务配置文件。在这里的配置文件优先级更高&#xff0c;会覆盖默认的 systemd 配置文件。通常&#xff0c;我们可以…...

编程日记 2023/8/3 1:32:39

华为、阿里巴巴、字节跳动 100+ Python 面试问题总结（一）

系列文章目录 个人简介&#xff1a;机电专业在读研究生&#xff0c;CSDN内容合伙人&#xff0c;博主个人首页 Python面试专栏&#xff1a;《Python面试》此专栏面向准备面试的2024届毕业生。欢迎阅读&#xff0c;一起进步&#xff01;&#x1f31f;&#x1f31f;&#x1f31f; …...

编程日记 2023/8/3 1:31:38

【牛客网】二叉搜索树与双向链表

二叉搜索树与双向链表 题目描述算法分析编程代码 链接: 二叉搜索树与双向链表 题目描述 算法分析 编程代码 /* struct TreeNode {int val;struct TreeNode *left;struct TreeNode *right;TreeNode(int x) :val(x), left(NULL), right(NULL) {} };*/ class Solution { public:…...

编程日记 2023/8/3 1:30:36

Oracle免费在线编程：Oracle APEX

前提&#xff1a; 注意&#xff1a;你要有个梯子才能更稳定的访问。 不需要安装Oracle&#xff0c;但是需要注册。&#xff08;还算方便的&#xff09; 注册&登录过程 进入Oracle APEX官网&#xff0c;我们选择免费的APEX工作区即可&#xff0c;点击“免费注册”。在注册…...

编程日记 2023/8/3 1:29:35