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

JS的防抖和节流

news 文章来源：https://blog.csdn.net/m0_66570642/article/details/135430482 2025/1/11 9:55:37

目录

防抖

搜索框带来的问题

实现的思路

案例

封装防抖函数

节流

滚动条加载带来的问题

实现的思路

案例

封装节流函数

防抖

搜索框带来的问题

需求：根据输入框内容来请求数据

<!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>
</head>
<body><input id="searchTxt" type="search" placeholder="请输入关键字检索"><script>document.querySelector("#searchTxt").oninput = function(){console.log('发送请求，当前输入框值：',this.value)}</script>
</body>
</html>

上面的代码会带来一个问题：用户每输入一个关键字都会触发

现在是要求是用户停下来不输入的时候再触发一次，这个时候就需要用到防抖函数了

实现的思路

  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></head><body><input id="searchTxt" type="search" placeholder="请输入关键字检索"><script>let t = nulldocument.querySelector("#searchTxt").oninput = function(){clearTimeout(t) //有定时器则清除t = setTimeout(() => {console.log('发送请求，当前输入框值：',this.value)}, 1000);}</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></head><body><input id="searchTxt" type="search" placeholder="请输入关键字检索"><script>document.querySelector("#searchTxt").oninput = debounce(function(){console.log('发送请求，当前输入框值：',this.value)})//封装一个公共的防抖函数function debounce(fn){//将函数逻辑放入fn中let t = null //此处利用闭包保存定时器return function(){clearTimeout(t) //有定时器则清除t = setTimeout(() => {//箭头函数指向外面函数的this,而外面函数由input触发fn.call(this) //利用call改变fn的this,否则fn的this为undefined}, 1000);}}</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{height: 1000px;}</style></head><body><div class="box">​</div><script>document.onscroll = function(){console.log('发送ajax,请求下一页数据')}</script></body></html>

上面的代码会带来一个问题：用户轻轻下拉滚动条,onscroll中的逻辑会触发很多次

现在是要求是降低触发事件的频率,这个时候就需要用到节流函数了。

实现的思路

  1. 事件函数执行,先判断是否有定时器，有则直接return

  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{height: 1000px;}</style></head><body><div class="box"></div><script>let t = nulldocument.onscroll = function(){if(null != t) return //关键点1：有定时器则returnt = setTimeout(() => {//关键点2：逻辑代码放到定时器中console.log('发送ajax,请求下一页数据')t = null  //关键点3：定时器执行完毕,置空定时器变量}, 500);}</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{height: 1000px;}</style>
</head>
<body><div class="box"></div><script>document.onscroll = throttle(function () {console.log('发送ajax,请求下一页数据',this)})//封装一个节流函数function throttle(fn) {return function(){	//真正的事件处理函数（this:事件源）//这里用的是fn.t变量的形式来保存定时器变量if(null != fn.t) return fn.t = setTimeout(() => { fn.call(this)
//确保上面的函数中this关键字是事件源（如果用fu()调用，上面this就变成了window）fn.t = null	
//置空，让事件再次触发的时候，重新创建一个定时器}, 500);}}</script>
</body>
</html>

相关文章：

JS的防抖和节流

目录 防抖 搜索框带来的问题 实现的思路 案例 封装防抖函数 节流 滚动条加载带来的问题 实现的思路 案例 封装节流函数 防抖 搜索框带来的问题 需求&#xff1a;根据输入框内容来请求数据 <!DOCTYPE html> <html lang"en"> <head><…...

编程日记 2024/1/6 21:04:57

互联网加竞赛 基于人工智能的图像分类算法研究与实现 - 深度学习卷积神经网络图像分类

文章目录 0 简介1 常用的分类网络介绍1.1 CNN1.2 VGG1.3 GoogleNet 2 图像分类部分代码实现2.1 环境依赖2.2 需要导入的包2.3 参数设置(路径&#xff0c;图像尺寸&#xff0c;数据集分割比例)2.4 从preprocessedFolder读取图片并返回numpy格式(便于在神经网络中训练)2.5 数据预…...

编程日记 2024/1/6 21:03:56

pip安装报错SSL

confirming the ssl certificate: HTTPSConnectionPool(hostmirrors.cloud.tencent.com, port443) 错误代码如上 偶然搜索&#xff1a;ubuntu pip出错 confirming the ssl certificate: HTTPSConnectionPool(host‘mirrors.cloud.tencent.com’, port443) 看到这个回答 【日常踩…...

编程日记 2024/1/6 21:02:54

手机视频监控客户端APP如何实现跨安卓、苹果和windows平台，并满足不同人的使用习惯

目 录 一、手机视频监控客户端的应用和发展 二、手机视频监控客户端存在的问题 三、HTML5视频监控客户端在手机上实现的方案 &#xff08;一&#xff09;HTML5及其优点 &#xff08;二&#xff09;HTML5在手机上实现视频应用功能的优势 四、手机HTML5…...

编程日记 2024/1/6 21:00:52

从写下第1个脚本到年薪40W，我的自动化测试心路历程

我希望我的故事能够激励现在的软件测试人&#xff0c;尤其是还坚持在做“点点点”的测试人。 你可能会有疑问&#xff1a;“我也能做到这一点的可能性有多大&#xff1f;”因此&#xff0c;我会尽量把自己做决定和思考的过程讲得更具体一些&#xff0c;并尽量体现更多细节。 …...

编程日记 2024/1/6 20:57:49

Vue CLI组件通信

目录 一、组件通信简介1.什么是组件通信&#xff1f;2.组件之间如何通信3.组件关系分类4.通信解决方案5.父子通信流程6.父向子通信代码示例7.子向父通信代码示例8.总结 二、props1.Props 定义2.Props 作用3.特点4.代码演示 三、props校验1.思考2.作用3.语法4.代码演示 四、prop…...

编程日记 2024/1/6 20:54:45

C语言编译器（C语言编程软件）完全攻略（第九部分：VS2019使用教程（使用VS2019编写C语言程序））

介绍常用C语言编译器的安装、配置和使用。 九、VS2019使用教程&#xff08;使用VS2019编写C语言程序&#xff09; 继《八、VS2019下载地址和安装教程&#xff08;图解&#xff09;》之后&#xff0c;本节给大家讲解如何用 VS2019 编写并运行 C 语言程序。 例如&#xff0c;在…...

编程日记 2024/1/6 20:53:44

走向云原生 破局数字化

近年来&#xff0c;随着云计算概念和技术的普及&#xff0c;云原生一词也越来越热门&#xff0c;云原生成为云计算领域的新变量。行业内&#xff0c;华为、阿里巴巴、字节跳动等各个大厂都在“抢滩”云原生市场。行业外&#xff0c;云原生也逐渐出圈&#xff0c;出现在大众视野…...

编程日记 2024/1/6 20:52:43

spring常用注解（三）springbean类

一、Service用于标注业务层组件、 二、Repository用于标注数据访问组件&#xff0c;即DAO组件。 三、Component泛指组件&#xff0c;当组件不好归类的时候&#xff0c;我们可以使用这个注解进行标注。&#xff08;pojo&#xff09; 四、Scope用于指定scope作用域的&#xff…...

编程日记 2024/1/6 20:47:38

qiankun微服务

官网 &#x1f4e6; 基于 single-spa 封装&#xff0c;提供了更加开箱即用的 API。 &#x1f4f1; 技术栈无关&#xff0c;任意技术栈的应用均可 使用/接入&#xff0c;不论是 React/Vue/Angular/JQuery 还是其他等框架。 &#x1f4aa; HTML Entry 接入方式&#xff0c;让你接…...

编程日记 2024/1/6 20:46:38

文件夹重命名方法：提高效率减少错误，中英文批量翻译文件夹名称

在日常生活和工作中&#xff0c;经常要处理大量的文件夹&#xff0c;无论是整理电脑上的文件&#xff0c;还是为项目分类。如何快速、准确地重命名这些文件夹&#xff0c;对于提高工作效率和减少错误至关重要。现在来看下云炫文件管理器一些实用的文件夹重命名方法&#xff0c;…...

编程日记 2024/1/6 20:45:37

【PHP】where和whereOr一起复杂查询示例

在ThinkPHP 5 中&#xff0c;where 和 whereOr 方法可以一起使用以实现复杂的查询条件。以下是一个示例&#xff1a; // 接收的参数 $param $this->request->param();// 实例化 $query new UserModel();// 关联表 $query->with([collect > function($collect_qu…...

编程日记 2024/1/6 20:43:33

Mysql 动态链接库配置步骤+ 完成封装init和close接口

1、创建新项目 动态链接库dll 2、将附带的文件都删除&#xff0c;创建LXMysql.cpp 3、项目设置 3.1、预编译头&#xff0c;不使用预编译头 3.2、添加头文件 3.3、添加类 3.4、写初始化函数 4、项目配置 4.1、右键解决方案-属性-常规-输出目录 ..\..\bin 4.2、生成lib文件 右…...

编程日记 2024/1/6 20:42:32

哈希一致性算法

一致性哈希是什么&#xff0c;使用场景&#xff0c;解决了什么问题&#xff1f; #网站分配请求问题&#xff1f; 大多数网站背后肯定不是只有一台服务器提供服务&#xff0c;因为单机的并发量和数据量都是有限的&#xff0c;所以都会用多台服务器构成集群来对外提供服务。 但…...

编程日记 2024/1/6 20:41:31

基于SpringBoot的在线考试系统绿色

文章目录 项目介绍主要功能截图：部分代码展示设计总结项目获取方式🍅 作者主页：超级无敌暴龙战士塔塔开 🍅 简介：Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我，都给你】 🍅文末获取源码联系🍅 项目介绍 基于SpringBoot的在线考试系统绿色,java…...

编程日记 2024/1/6 20:40:30

设计模式：原型模式

原型模式 定义代码实现使用场景 定义 原型模式&#xff08;Prototype Pattern&#xff09;是一种创建型设计模式&#xff0c;它允许通过复制现有的对象来创建新对象&#xff0c;而无需从头开始编写代码。在这个模式中&#xff0c;我们可以使用已经存在的对象作为“原型”&…...

编程日记 2024/1/6 20:38:28

Qt5+VS2013兼容XP方法

用Qt5VS2013编译程序默认配置会在XP运行时报"不是有效的Win32程序" 工作需要必须要XP运行 pro文件中加一句: QMAKE_LFLAGS_WINDOWS /SUBSYSTEM:WINDOWS,5.01 ------------------------------------------------------- qtbase\mkspecs\common\msvc-desktop.conf …...

编程日记 2024/1/6 20:35:26

GitHub Copilot 最佳免费平替：阿里通义灵码

之前分享了不少关于 GitHub Copilot 的文章&#xff0c;不少粉丝都评论让我试试阿里的通义灵码&#xff0c;这让我对通义灵码有了不少的兴趣。 今天&#xff0c;阿七就带大家了解一下阿里的通义灵码&#xff0c;我们按照之前 GitHub Copilot 的顺序分享通义灵码在相同场景下的…...

编程日记 2024/1/6 20:31:22

体系化的进阶学习内容

UWA学堂&#xff1a;传播游戏行业的体系化的进阶学习内容。UWA学堂作为面向开发者的在线学习平台&#xff0c;目前已经上线272门课程&#xff0c;涵盖了3D引擎渲染、UI、逻辑代码等多个模块&#xff0c;拥有完整的学习体系&#xff0c;一直致力于为广大的开发者提供更丰富、更优…...

编程日记 2024/1/6 20:30:22

SpringBoot解决前后端分离跨域问题：状态码403拒绝访问

最近在写和同学一起做一个前后端分离的项目&#xff0c;今日开始对接口准备进行 登录注册 的时候发现前端在发起请求后&#xff0c;抓包发现后端返回了一个403的错误&#xff0c;解决了很久发现是【跨域问题】&#xff0c;第一次遇到&#xff0c;便作此记录✍ 异常描述 在后端…...

编程日记 2024/1/6 20:28:20

【linux】更改infiniband卡在Debian系统的网络接口名

在Debian或任何其他基于Linux的系统中&#xff0c;网络接口的名称由udev系统管理。通过创建udev规则&#xff0c;可以修改网络接口名称。以下是更改InfiniBand卡接口名称的一般步骤&#xff1a; 1. 找到网络接口的属性&#xff0c;以编写匹配的udev规则 可以使用udevadm命令查…...

编程日记 2024/1/6 20:24:16

SPRING BOOT发送邮件验证码（Gmail邮箱）

SPRING BOOT邮件发送验证码 一、Gmail邮箱配置 1、进入Gmail(https://mail.google.com) 2、打开谷歌右上角设置 3、启用POP/IMP 4、启用两步验证(https://myaccount.google.com/security) 5、建立应用程式密码 6、复制保存应用程式密码 二、代码 1、引入依赖 <d…...

编程日记 2024/1/6 20:22:14

Liunx安装FTP和SFTP

ftp端口&#xff1a;20/21 sftp端口&#xff1a;22 一、ftp 1、安装ftp yum install vsftpd #安装ftp 服务 &#xff08;1&#xff09;查看ftp服务的状态 命令&#xff1a;service vsftpd status PS&#xff1a;提示vsftpd: command not found&#xff0c;修改PATH的环境…...

编程日记 2024/1/6 20:21:13

【Mars3d】new mars3d.layer.GeoJsonLayer({不规则polygon加载label不在正中间的解决方案

问题&#xff1a; 1.new mars3d.layer.GeoJsonLayer({type: "polygon",在styleOptions里配置label的时候&#xff0c;发现这个 不规则polygon加载的时候&#xff0c;会出现label不在中心位置。 graphicLayer new mars3d.layer.GeoJsonLayer({ name: "全国省界…...

编程日记 2024/1/6 20:19:11

怎么快速修复mfc140.dll文件？解决mfc140.dll缺失的方法

面对计算机报告的 ​mfc140.dll​ 文件遗失错误&#xff0c;这通常表明系统中缺少一个关键的动态链接库文件&#xff0c;该文件对于运行以 Microsoft Foundation Class (MFC) 库编写的程序十分重要&#xff0c;尤其是那些需要图形界面的应用程序和一些游戏。若没有这个文件&…...

编程日记 2024/1/6 20:15:07

安全防御之入侵检测与防范技术

安全防御中的入侵检测与防范技术主要涉及到入侵检测系统&#xff08;IDS&#xff09;和入侵防御技术&#xff08;IPS&#xff09;。 入侵检测系统&#xff08;IDS&#xff09;是一种对入侵行为自动进行检测、监控和分析的软件与硬件的组合系统。IDS通过从计算机网络或系统中的若…...

编程日记 2024/1/6 20:14:06

Leetcode2807. 在链表中插入最大公约数

Problem: 2807. 在链表中插入最大公约数 文章目录 题目思路注意点Code 题目思路 模拟插入流程&#xff1a; 检测当前节点是否有后置结点&#xff1b;将当前结点与后置结点的值做最大公约数处理得到新结点的值&#xff0c;然后插入到当前结点之后&#xff1b;再将检测结点向后…...

编程日记 2024/1/6 20:13:05

MySQL-DML

DML是数据操纵语言&#xff0c;用来对表中数据进行增删改操纵。 添加数据&#xff1a;INSERT 1.给指定字段添加数据&#xff1a;INSERT INTO 表名(字段名1,字段名2,...)VALUES(值1,值2); 2.给全部字段添加数据&#xff1a;INSERT INTO 表名VALUES(值1,值2) 3.给指定字段批量添…...

编程日记 2024/1/6 20:12:04

开源项目 | 完整部署流程、一款开源人人可用的开源数据可视化分析工具

&#x1f4da; 项目介绍 在互联网数据大爆炸的这几年&#xff0c;各类数据处理、数据可视化的需求使得 GitHub 上诞生了一大批高质量的 BI 工具。 借助这些 BI 工具&#xff0c;我们能够大幅提升数据分析效率、生成更高质量的项目报告&#xff0c;让用户通过直观的数据看到结…...

编程日记 2024/1/6 20:11:03

我建立了一个资源分享群

我建立了一个资源分享群 在为寻找资源犯愁&#xff1f; 在为分享资源犯愁&#xff1f; 一起加入分享资源群&#xff08;是wx群哦&#xff09;吧&#xff01;你可以分享自己的资源帮助他人。你可以在群组里需求资源获取别人的帮助。发广告请绕行&#xff0c;会被拉黑哦 微信…...

编程日记 2024/1/6 20:10:02

如何在年报网站上做遗失公告/今日最新国内新闻重大事件

合理维护网络服务器安全的七个小技巧对于一个网络而言&#xff0c;维护其服务器安全的重要性是不言而喻的&#xff0c;那么作为管理员的你如何来更好地保障服务器的安全呢&#xff1f;本文较系统地给您介绍一些实用的技巧。 技巧一:从基本做起 ***开始对你的网络发起***的时候&…...

编程日记 2025/1/11 6:25:18

建设英文商城网站/网络营销的含义的理解

九章算法官网-原文网址 http://www.jiuzhang.com/problem/55/ 题目 给一个字符串和一个旋转的偏移量offset&#xff0c;将字符串循环右移offset位。 如&#xff1a;"abcdefg" 循环右移 4位之后变为了&#xff1a;"defgabc" 要求做到O(1)的额外空间耗费…...

编程日记 2025/1/11 3:49:57

有口碑的做网站/seo深度解析

Java后端面试知识点汇总✈ 公众号&#xff1a;知识浅谈 为了不侵犯作者版权&#xff0c;选择了转载&#xff0c;我补充了很多自己的理解。 垃圾回收相关GC Root都有哪些&#xff1f;垃圾回收器的基本原理垃圾回收器不可以马上回收内存怎么主动通知虚拟机进行垃圾回收java中会存…...

编程日记 2025/1/10 23:06:03

可以做外链的网站/网页设计免费模板

【问题描述】 子网掩码是用来判断任意两台计算机的IP地址是否属于同一子网络的根据。子网掩码与 IP 地址结构相同&#xff0c;是32 位二进制数&#xff0c;其中网络号部分全为 “1” 和主机号部分全为 “0” 。利用子网掩码可以判断两台主机是否中同一子网中。若两台主机的IP …...

编程日记 2025/1/10 15:28:29

网站制作价格表/东莞网站推广运营公司

新文章移至 http://cffile.sinaapp.com/?p22tomcat5.0版本的时候&#xff0c;由于context是直接配置在server.xml中的&#xff08;最终是生成$CATALINA_HOME/conf /[enginename]/[hostname]目录下的应用名称.xml文件&#xff0c;启动顺序是按照目录下生成的应用名称的字典顺序…...

编程日记 2025/1/10 14:57:15

上海人才招聘官网/南通百度seo代理

简介 YAML 是一种简洁的非标记语言(YAML Ain’t Markup Language),YAML以数据为中心&#xff0c;使用空白&#xff0c;缩进&#xff0c;分行组织数据&#xff0c;从而使得表示更加简洁易读&#xff0c; 常用于作为配置文件, 比json更加简洁。 YAML 1.2 (3rd Edition): http:/…...

编程日记 2025/1/10 12:04:35