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

js知识点1:防抖节流

js知识点1:防抖节流

  • 防抖
  • 节流

防抖节流,本质上是优化高频率执行代码的一种手段
定义:
防抖: n 秒后再执行该事件,若在 n 秒内被重复触发,则重新计时
节流: n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效

一个经典的比喻:
想象每天上班大厦底下的电梯。把电梯完成一次运送,类比为一次函数的执行和响应
假设电梯有两种运行策略 debounce 和 throttle,超时设定为15秒,不考虑容量限制

电梯第一个人进来后,15秒后准时运送一次,这是节流

电梯里第一个人进来后,等待15秒。如果过程中又有人进来,15秒等待重新计时,直到15秒后开始运送,这是防抖

首选,给出总结:

相同点
都可以通过使用 setTimeout 实现
降低回调执行频率。节省计算资源

不同点

函数防抖,在一段连续操作结束后,处理回调,利用clearTimeout和 setTimeout实现。函数节流,在一段连续操作中,每一段时间只执行一次,频率较高的事件中使用来提高性能
函数防抖关注一定时间连续触发的事件,只在最后执行一次,而函数节流一段时间内只执行一次

函数节流,不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数
防抖只是在最后一次事件后才触发一次函数。

应用场景

例如,都设置时间频率为500ms,在2秒时间内,频繁触发函数,节流,每隔 500ms 就执行一次。防抖,则不管调动多少次方法,在2s后,只会执行一次

防抖应用场景:

搜索框输入查询、手机号、邮箱验证输入检测。只需用户最后一次输入完,再发送请求
窗口大小resize。只需窗口调整完成后,计算窗口大小,防止重复渲染。

节流应用场景:

监听滚动事件判断是否到页面底部自动加载更多
搜索联想功能
DOM元素的拖拽功能实现
射击游戏的 mousedown/keydown 事件(单位时间只能发射一颗子弹)
防止高频点击提交,防止表单重复提交;

防抖

以输入框查询功能为例:
在这里插入图片描述在这里插入图片描述

//html:
<span>查询:</span>
<input type="text" id="inputVal">//js:
//未处理
$(document).on("keyup","#inputVal",function(){//执行内容console.log($("#inputVal").val());
})//防抖处理
var timer=null;
$(document).on("keyup","#inputVal",function(){if(timer){//在执行中 (如果之前的定时器还存在,则清除)clearTimeout(timer);}//500ms后再触发timer=setTimeout(function(){//执行内容console.log($("#inputVal").val());timer=null;//本次查询完成,定时器清除,以便下次查询处理}, 500);
})

防抖函数封装:

//fn为事件处理函数 delay延迟时间
function debounce(fn, delay) {var timer = null;return function () {if (timer) {clearTimeout(timer);}timer = setTimeout(() => {fn.apply(this, arguments); //this和参数timer = null;}, delay);};
}

节流

以滚动页面到底部为例:
添加节流处理后的效果:scroll事件中的代码,会在事件触发时,每隔500ms触发一次。
在这里插入图片描述
在这里插入图片描述

//未处理var i=0;window.onscroll=function(){console.log(++i);var scrollTop=document.documentElement.scrollTop;var clientHeight=document.documentElement.clientHeight;var scrollHeight=document.documentElement.scrollHeight;var scrollHeight=document.documentElement.scrollHeight;if(scrollTop+clientHeight>=scrollHeight){console.log('到底了!');}}//防抖处理
var i=0;
var timer=null;
window.onscroll=function(){if(timer){return;}timer=setTimeout(function(){console.log(++i);var scrollTop=document.documentElement.scrollTop;var clientHeight=document.documentElement.clientHeight;var scrollHeight=document.documentElement.scrollHeight;var scrollHeight=document.documentElement.scrollHeight;if(scrollTop+clientHeight>=scrollHeight){console.log('到底了!');}timer=null;},500)
}

节流函数封装:

//节流封装function throttle(fn, delay) {var timer = null;return function () {if (timer) {return;}timer = setTimeout(() => {fn.apply(this, arguments);//把this和参数传递过去timer = null;}, delay);};}

参考:
https://baijiahao.baidu.com/s?id=1752769417074179461&wfr=spider&for=pc
https://baijiahao.baidu.com/s?id=1738733742087151995&wfr=spider&for=pc

相关文章:

js知识点1:防抖节流

js知识点1&#xff1a;防抖节流 防抖节流 防抖节流&#xff0c;本质上是优化高频率执行代码的一种手段 定义&#xff1a; 防抖: n 秒后再执行该事件&#xff0c;若在 n 秒内被重复触发&#xff0c;则重新计时 节流: n 秒内只运行一次&#xff0c;若在 n 秒内重复触发&#xff0…...

虚拟机下Ubuntu上网设置

文章目录 一、虚拟机上网的两种方式1.1 NAT模式&#xff08;Network Address Translation&#xff09;1.2 桥接模式&#xff08;Bridge Mode&#xff09;1.3 简介 二、实际配置2.1 NAT模式配置2.2 桥接模式配置 之前跟着博客配了好几个也没用&#xff0c;后来自己慢慢模式实践测…...

Unity3d C#利用Editor编辑器拓展实现配置UI背景样式一键设置UI背景样式功能(含源码)

前言 在开发UI滚动列表的时候&#xff0c;经常会有每项的背景图不统一的情况&#xff0c;会间隔重复的情况居多。这种情况下&#xff0c;手动去设置间隔一行的背景图或者颜色是比较麻烦的。在此背景下&#xff0c;笔者尝试写个小工具&#xff0c;在搭建UI时配置一下循环背景的…...

【微服务】服务间调用

当我们的应用从一个大单体拆分成多个微服务之后,服务间调用有多少种方式?服务间调用如果出现超时,如果避免雪崩,即如何做限流熔断机制,原理是什么? 服务间调用方式 OpenFeign 使用Feign进行服务间调用,我们会在启动类加@EnableFeignClients启用。 package org.sprin…...

一句话分清C/C++声明和定义

定义告诉编译器在在哪个位置存储变量&#xff0c;声明没有 声明&#xff1a;告诉编译器&#xff0c;变量类型和名字 定义&#xff1a;告诉编译器变量存储的位置。 举例子 int i; // 这是声明定义。声明&#xff1a;告诉编译器变量类型int,变量名字i&#xff0c; // 定义&…...

《哥德尔证明》阅读笔记——初等命题逻辑的一致性证明过程

前言 前两节主要阐述了公理系统的发展历史&#xff0c;一致性问题的提出&#xff0c;以及希尔伯特的洞见&#xff0c;本节将给出哥德尔证明所需的最后一次具体背景阐述&#xff0c;包含两个问题&#xff1a;一是罗素所著的《数学原理》是为何而写&#xff1f;二是从数学原理中…...

迪文屏开发保姆级教程—弹出键盘录入ASCII字符

本篇文章主要介绍了在DGBUS平台上使用文本录入键盘录入ASCII字符&#xff0c;数字和字母的教程。 文本录入键盘支持录入ASCII字符&#xff0c;数字和字母。 官方开发指南PDF&#xff1a;&#xff08;不方便下载的私聊我发给你&#xff09; https://download.csdn.net/download…...

Java,处理字符串的案例()

场景 为了得到一个都是英雄名字的字符数组&#xff0c;需要对如下字符串进行处理 疾风剑豪&#xff0c;影流之主&#xff0c;封魔剑魂&#xff0c;暗裔剑魔&#xff0c;无极剑圣&#xff0c;无双剑姬&#xff0c;武器大师&#xff0c;德邦总管&#xff0c;蛮族之王&#xff0…...

微信小程序更新机制

1/同步更新 1、定期检查更新时&#xff1b; 2、长期未使用&#xff0c;首次进入会同步更新&#xff0c;但在弱网或者下载新版本失败的情况下&#xff0c;还会使用旧版本。 2/异步更新&#xff1a; 启动时异步更新 3/开发者手动触发更新 在启动时异步更新的情况下&#xff0c;…...

CentOS 7 部署 Nacos-2.3.0 (单机版)

CentOS 7 部署 Nacos-2.3.0 &#xff08;单机版&#xff09; 1. 下载 Nacos 安装包 历史版本&#xff1a;https://github.com/alibaba/nacos/releases/ 我选的是 2.3.0 版本&#xff0c;https://github.com/alibaba/nacos/releases/download/2.3.0/nacos-server-2.3.0.tar.g…...

Springboot优雅实现对接口返回统一封装

前端在调用后端接口时往往不同的接口返回的数据是不一样的&#xff0c;但是通常我们会与前端约定一个固定的返回格式&#xff0c;通过固定的格式告诉他们什么时候接口是返回成功&#xff0c;什么时候返回失败&#xff0c;返回成功后他们如何拿到接口返回的数据去渲染前端页面。…...

Kafka 安装与部署

目录 Kafka 下载 &#xff08;1&#xff09;将 kafka_2.11-2.4.1.tgz 上传至 /opt/software/ &#xff08;2&#xff09;解压安装包至 /opt/module/ [huweihadoop101 ~]$ cd /opt/software/ [huweihadoop101 software]$ tar -zxvf kafka_2.11-2.4.1.tgz -C ../module/&#…...

计算 N*4*4 位姿形状的逆变换,在N*3*4位姿后补充 [0,0,0,1]

针对 [N,4,4] shape 的 poses&#xff0c;函数 ComputeInversePoses 返回 相同 shape&#xff0c;但是每个 pose 都是前面的 逆 pose。 针对 [N,3,4] shape 的 poses&#xff0c;函数 AddIdentityToPoses 返回 在每个 [3,4] pose下加上 [0,0,0,1] 后的pose&#xff0c;返回的…...

人工智能可以战胜人类智慧大脑么?

引言 在当今快速发展的科技时代&#xff0c;人工智能的进步日新月异&#xff0c;引发了一场深刻的讨论&#xff1a;能否有一天&#xff0c;人工智能能够超越甚至战胜人类智慧&#xff1f;这个问题涉及到人类认知的广泛领域&#xff0c;牵涉到人类思维的深层次特质以及AI技术在…...

【数据结构和算法】 K 和数对的最大数目

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、题目描述 二、题解 2.1 方法一&#xff1a;双指针排序 三、代码 3.1 方法一&#xff1a;双指针排序 3.2 方法二&#xff1…...

基于ssm高校推免报名系统源码和论文

网络的广泛应用给生活带来了十分的便利。所以把高校推免报名管理与现在网络相结合&#xff0c;利用java技术建设高校推免报名管理系统&#xff0c;实现高校推免报名的信息化。则对于进一步提高高校推免报名管理发展&#xff0c;丰富高校推免报名管理经验能起到不少的促进作用。…...

算法设计与分析2023秋-头歌实验-实验七 动态规划

文章目录 第1关&#xff1a;数塔问题任务描述相关知识编程要求解题思路测试说明参考答案 第2关&#xff1a;最长公共子序列任务描述相关知识编程要求解题思路&#xff1a;测试说明参考答案 第3关&#xff1a;求序列-2 11 -4 13 -5 -2的最大子段和任务描述相关知识编程要求解题思…...

复杂 SQL 实现分组分情况分页查询

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、根据 camp_status 字段分为 6 种情况 1.1 SQL语句 1.2 SQL解释 二、分页 SQL 实现 2.1 SQL语句 2.2 根据 camp_type 区分返…...

JavaScript---如何完美的判断返回对象是否有值

如何判断一个对象为空是我们在开发中经常会遇到的问题&#xff0c;今天我们来聊聊几种经常使用的方法&#xff0c;以及在不同的场景下我们如何去使用。 1. JSON.stringify JSON.stringify 方法可以使对象序列化&#xff0c;转为相应的 JSON 格式。 js 复制代码 const obj {…...

kafka offset sasl加密连接

kafka-tool&#xff08;offset&#xff09; 进行SCRAM连接&#xff0c;直接上图 填写jaas的认证&#xff08;账密 引用包&#xff09;...

Android studio矩形背景颜色以及弧度的设置

在这里插入图片描述 Android的shape中主要设置的属性 corners&#xff1a;用于设置形状的圆角&#xff0c;可以设置圆角的半径、颜色等属性。 stroke&#xff1a;用于设置形状的边框&#xff0c;可以设置边框的宽度、颜色等属性。 padding&#xff1a;用于设置形状的内边距&…...

Acrel-1000DP分布式光伏系统在某重工企业18MW分布式光伏中应用——安科瑞 顾烊宇

摘 要&#xff1a;分布式光伏发电特指在用户场地附近建设&#xff0c;运行方式以用户侧自发自用、余电上网&#xff0c;且在配电系统平衡调节为特征的光伏发电设施&#xff0c;是一种新型的、具有广阔发展前景的发电和能源综合利用方式&#xff0c;它倡导就近发电&#xff0c;就…...

3 python基本语法 - Dict 字典

Python 中字典&#xff08;dict&#xff09;是一种无序的、可变的序列&#xff0c;它的元素以“键值对&#xff08;key-value&#xff09;”的形式存储。相对地&#xff0c;列表&#xff08;list&#xff09;和元组&#xff08;tuple&#xff09;都是有序的序列&#xff0c;它们…...

Magnific AI:彻底改变 AI 生成图像的升级

在我最近与 Magnific AI 的讨论中&#xff0c;我不仅感到惊讶&#xff0c;而且对该工具提供的质量和可能性着迷。我发现 Magnific AI 能够转换人工智能生成的图像&#xff08;这些图像通常只能以低分辨率提供&#xff09;&#xff0c;尤其令人印象深刻&#xff0c;不仅在可打印…...

BKP 备份寄存器 RTC 实时时钟-stm32入门

这一章节我们要讲的主要内容是 RTC 实时时钟&#xff0c;对应手册&#xff0c;是第 16 章的位置。 实时时钟这个东西&#xff0c;本质上是一个定时器&#xff0c;但是这个定时器&#xff0c;是专门用来产生年月日时分秒&#xff0c;这种日期和时间信息的。所以学会了 STM32 的…...

1.1 数据结构-数据的表示

文章目录 1.1.1 二元关系及其性质:1.1.1.1 笛卡尔积:1.1.1.2 二元关系:持续更新当中 ....... 1.1.1 二元关系及其性质: 数据的基本单元称为额数据元素,数据是从客观事物的观测中的到的,数据元素并不是鼓励存在的,而是存在密切的联系,也因此才能表示和描述客观事物,数据元素之间…...

UNIX Linux系统 启动PPOCRLabel报错[已放弃 (核心已转储)]

参照官方教程安装后&#xff0c;启动PPOCRLabel报错&#xff1a;[已放弃 (核心已转储)] 官方链接地址&#xff1a;PPOCRLabelv2 $~ PPOCRLabel --lang ch QObject::moveToThread: Current thread (0x561534309430) is not the objects thread (0x56153929eac0). Cannot move to…...

前端开发中的webpack打包工具

前端技术发展迅猛&#xff0c;各种可以提高开发效率的新思想和框架层出不穷&#xff0c;但是它们都有一个共同点&#xff0c;即源代码无法直接运行&#xff0c;必须通过转换后才可以正常运行。webpack是目前主流的打包模块化JavaScript的工具之一。 本章主要涉及的知识点有&am…...

Mybatis配置-数据库厂商标识(databaseIdProvider)

MyBatis可以根据数据库供应商执行不同的语句。多数据库供应商支持是基于映射语句的databaseId属性。MyBatis将加载所有没有databaseId属性或具有与当前数据库匹配的databaseId属性的语句。如果找到具有和不具有databaseId的相同语句&#xff0c;则后者将被丢弃。要启用多供应商…...

【Java】使用递归的方法获取层级关系数据demo

使用递归来完善各种业务数据的层级关系的获取 引言&#xff1a;在Java开发中&#xff0c;我们通常会遇到层层递进的关系型数据的获取问题&#xff0c;有时是树状解构&#xff0c;或金字塔结构&#xff0c;怎么描述都行&#xff0c;错综复杂的关系在程序中还是可以理清的。 这…...