什么是防抖,节流? js实现核心代码,以及应用场景?

2023-11-17

        防抖和节流都是用于项目优化的手段,用来限制事件的触发频率的两种常见技术,

什么是防抖:

        在事件被触发后,等待一段时间,如果在这段时间内没有再次触发该事件,则执行相应的操作,如果在定时等待期间又触发的该事件,则重新计时,主要用于处理频繁触发的事件。

  核心原理 :

        防抖的实现最主要的原理就是对定时器的清除,重新建立来实现的。

        

二次点击该事件会将第一次的点击建立的定时器清除,再创立,从而实现重新计时,整个流程只有一个触发器,多次点击的话,依次类推。

应用场景: 

        将多次高频操作优化为只在最后一次执行,通常使用的场景是:用户连续输入,只需要在输入结束后做一次校验即可,比如input搜索、校验等

什么是节流:

        在一定时间间隔内只执行一次事件。无论事件触发多频繁,都会按照固定的时间间隔执行相应的操作。节流主要用于限制某些操作的执行频率,例如滚动事件、鼠标移动事件等。

核心原理 :

        节流的实现是利用条件判断来进行定时器的创建,只有初次点击,才会创建定时器,在定时器内除了逻辑代码还需写一个用于进入定时器创建的条件的初始化,从而实现几秒内只能触发一次事件。

在delay秒重复点击该事件,都不会进入条件,只有定时器计时结束才会修改条件为 null  从而实现delay秒内只能触发一次事件

应用场景:

将多次高频操作优化为在一定时间内只执行一次,通常使用的场景是:滚动事件、窗口大小变化事件等。

       

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

什么是防抖,节流? js实现核心代码,以及应用场景? 的相关文章

  • 如何从 JavaScript 中计算 HTML 表格的渲染高度?

    调整窗口大小时 我需要知道表格有多大 以便我可以动态地很好地适应中间的所有其他内容 表格高度仅取决于动态加载的内容 如何在 JavaScript 中计算表格的渲染高度 您可以使用element offsetHeight https deve
  • Javascript 与 Python 关于 Python 'map()' 函数的比较

    Python中有一个函数叫做map这可以让你去 map someFunction x y z 并继续应用该功能的列表 是否有与此功能等效的 JavaScript 我现在刚刚学习Python 虽然我被告知javascript是函数式语言 但我
  • JavaScript 对象引用缓存

    我们的代码库中有很多对象 它们的名称空间是为了避免冲突 Example App local view MyView 在我在代码库中看到的大多数地方 我们使用完整路径来获取对对象的引用 并且这在同一函数中重复多次 Example functi
  • 如何根据按钮单击折叠和展开 Kendo UI 树视图中的所有树节点?

    这是行不通的 您可以使用此代码 1 崩溃 折叠kendoTree查看文档 http docs kendoui com api web treeview methods collapse treeview kendoTreeView var
  • 如何使用 axios / jest 测试失败的请求

    我创建了一个非常小的应用程序 如果您传递硬币和数量 它可以计算为某些加密货币支付的总价格 我想测试错误 但我总是收到 收到的承诺已解决而不是被拒绝 我相信这是因为如果 url 错误 axios 仍然会解决承诺 我遇到的第二个问题是 我尝试测
  • 通知用户消息仍在输入中

    我正在使用 Laravel 5 6 7 Socket IO 和 vue js 我没有使用 Pusher 和 redis 下面是我的代码 用于向与我一对一聊天的用户发送消息 var url http localhost 6001 apps M
  • 来自 DataURL 的 Blob?

    Using FileReader s readAsDataURL 我可以将任意数据转换为数据 URL 有没有办法将数据 URL 转换回Blob使用内置浏览器 API 的实例 用户 Matt 一年前提出了以下代码 如何在javascript中
  • jQuery 的 css() 在应用于滚动事件时滞后

    我正在尝试实现一个简单的 固定标题 表 我知道这在理论上只能用 CSS 来完成 但是当涉及到 OSX Lion 及其消失的滚动条时 它效果不佳 所以我用 jQuery 来做 方法很简单 只有1 5行代码 inbox scroll funct
  • Telegram 授权无默认按钮

    使用 Telegram 第 3 方授权的唯一有记录的方法是使用其提供的脚本https core telegram org widgets login https core telegram org widgets login 这个脚本 正如
  • 光滑的轮播缓动示例

    我正在使用 Slick Carousel http kenwheeler github io slick http kenwheeler github io slick 但不知道如何合并不同的幻灯片切换 有人有例子可以分享吗 这是我目前拥有
  • 空 URL 哈希导致页面在 js 事件上跳转

    我有一个带有下一个和上一个按钮的照片库 如果我的某个 javascript 方法由于某种原因被破坏 那么当单击其中一个按钮时 它会向 url 添加一个哈希值 即 www google com 我知道可以给散列一个 div id 来跳转到页面
  • setInterval 内的返回值

    我想在 setInterval 内返回一个值 我只想以一定的时间间隔执行一些操作 这就是我尝试过的 function git limit var i 0 var git setInterval function console log i
  • Web SQL 数据库 + Javascript 循环

    我正在尝试解决这个问题 但我自己似乎无法解决 我正在使用 Web SQL DB 但无法让循环正常使用它 I use for var i 0 i lt numberofArticles 1 i db transaction function
  • Window 与 Var 声明变量[重复]

    这个问题在这里已经有答案了 可能的重复 JavaScript 中使用 var 和不使用 var 的区别 https stackoverflow com questions 1470488 difference between using v
  • Javascript 选择 onchange='this.form.submit()'

    我有一个带有选择和一些文本输入的表单 我希望在更改选择时提交表单 使用以下方法可以正常工作 onchange this form submit 但是 如果表单还包含提交按钮 则当选择更改时 表单不会提交 我猜有某种冲突 我在这里有什么选择
  • 为什么我需要 $(document.body) 来使用 Mootools Element 方法扩展 document.body?

    因此 在尝试让我的应用程序在最新的 IE 上运行后 结果发现 IE 不喜欢以下代码 document body getElement className Firefox 和 Chrome 响应良好 但是document bodyIE 上没有
  • 使用 jQuery Tablesorter 操作后如何恢复当前页面?

    我正在使用 tablesorter 但无法找到有关插件 tablesorter 寻呼机的任何文档 问题是我有一个显示一些数据的表 并且在每一行中都有一个删除链接 该链接附加了要删除的元素的唯一标识符 显然 是否可以保存我正在删除的页面 然后
  • 有没有办法防止输入 type=“number” 获得多个点值?

    我只想得到十进制值 如 1 5 0 56 等 但它允许多个点 有什么办法可以预防吗 您可以使用pattern属性
  • 如何根据所需表单输入的值更改 CSS 样式

    我想知道如何编写 javascript 来改变所需的表单元素的样式 如果它们有价值的话就改变它们 我想要做的是当所需的文本字段为空时 在它们周围有一个彩色边框 并在它们有值时删除边框样式 我想做的是编写一个 javascript 函数来检查
  • 使用 Lodash 将对象键转换为具有键值数量的数组[重复]

    这个问题在这里已经有答案了 我有一个产品对象 products bread 1 milk 2 cheese 2 chicken 1 我想要一个包含产品名称的数组 如下所示 products bread milk milk cheese ch

随机推荐

  • buuctf-Web1

    在登陆界面用sql注入的各种手段都没用 注册进去看看 抓包后发现数据包有点像xss 也能使它弹窗 但是好像没什么用 用标题1 会有关于sql语句的弹窗 但是如果抓包就不会出现 也能说明是单引号闭合 1 就不行 能知道是sql注入也不容易 闭
  • 用Python制作一个随机抽奖小工具

    大家好 我是才哥 最近在工作中面向社群玩家组织了一场活动 需要进行随机抽奖 参考之前小明大佬的案例 再结合自己的需求 做了一个简单的随机抽奖小工具 今天我就来顺便介绍一下这个小工具的制作过程吧 先看效果 1 核心功能设计 针对随机抽奖的小工
  • 自动控制原理知识点梳理——1. 自动控制的一般概念 & 2. 控制系统的数学模型

    目录 1 自动控制的一般概念 1 1知识梳理 逻辑图 2 控制系统的数学模型 2 1知识梳理 逻辑图 2 2补充内容 2 2 1传递函数的零点和极点 2 2 2典型环节及其传递函数 2 2 3相同的特征多项式和开环传递函数定义 2 2 4由
  • minecraft正版多人服务器,我的世界:“服务器的潜规则”,有的保护玩家,也有的打破平衡...

    多人联机 陪伴多数玩家的青春 点点滴滴 都是付出的时间与精力 如今 MC的 服务器 玩法愈来愈丰富 规则越来越多 那么 服务器内究竟有何潜规则呢 服务器控制台权限 gt OP权限 多数玩家都有这样的认为 OP权限在服务器中处在顶尖地位 那到
  • 税务大比武网络攻防复习(完整版)

    目录 信息化建设与管理 计算机终端设备 通信与网络 数据管理与应用 软件开发 计算与存储 基础设施保障 网络安全 网络安全基础 网络安全管理 密码学 软件开发安全 主机 数据库 中间件安全 网络与通信安全 网络攻击 信息收集 口令攻击和软件
  • uniapp小程序练手项目并上线

    如题 做一个自己的小程序 并在各大小程序开发者平台上线 背景 因没有小程序开发经验 且前端知识掌握得不好 作为一个小程序爱好者 总想有一款自己的小程序 同时也想有一款自己的app 虽然目前还没有实现 在整体难度上来说 小程序的实现比app的
  • 对数器的使用----bug测试,文章中含有测试源码

    当我们选择排序没有出现问题时 我们可以发现一个随机数组是有序的 会打印出 选择排序没有毛病 说明此时选择排序没有毛病 package cn Text public class LogarithmicDetector TODO 选择排序 pu
  • 2023省赛 飞机降落(dfs)

    看数据量 fact 10 3628800 直接暴力dfs include
  • firefly 搭建

    基本内容在http blog csdn net wangqiuyun article details 11150503里都有 在此仅记录搭建工程中遇到的问题及实际项目添加的工具 mysql安装 最好用5 6 服务启动不成功 基本是配置的问题
  • vue插件开发以及发布到npm流程——消息提示插件

    最近有兴趣学习了一下vue插件开发 以及发布到npm上 项目里可以直接使用自己开发的插件 以下文章以开发一个消息提示的组件为例 记录一下开发的流程 一 vue项目创建配置 创建vue项目的指令不多说 直接以下指令 这里我选择的vue2进行开
  • 校园二手物品交易系统微信小程序设计

    系统简介 本网最大的特点就功能全面 结构简单 角色功能明确 其不同角色实现以下基本功能 服务端 后台首页 可以直接跳转到后台首页 用户信息管理 管理所有申请通过的用户 商品信息管理 管理校园二手物品中所有的商品信息 非常详细 违规投诉管理
  • c语言源码解释,C语言一些细节注意(源码+解释)

    最近可能要回归底层开发设计 所以又看了看C的一些东西 顺便对一些问题进行了代码确认 现将代码贴出 希望对各位网友有所帮助 只是为了测试 没有按照什么规范写 代码风格比较烂 哈哈哈哈 大家见谅了 O
  • org.apache.hadoop.hbase.client.RetriesExhaustedException: Can't get the locations

    Hbase API操作表时报出异常 Exception in thread main org apache hadoop hbase client RetriesExhaustedException Can t get the locati
  • C++11新特性总结

    目录 一 统一的列表初始化 适用于各种STL容器 二 类型推导 auto 和 decltype的出现 三 右值引用移动语义 特别重要的新特性 四 万能引用 完美转发 五 可变参数模板 参数包 六 emplace back 的出现和对比分析
  • 判断apk是否签名以及获取apk信息

    一 判断apk是否签名 如果集合apkSingers 为空 说明没有签名人 未签名 try ApkFile apkParser new ApkFile new File C Users kesun5 Desktop doc b apk Ap
  • 安装Node.js和cnpm

    一 安装Node js 1 下载 Node js官网下载 根据自身系统下载对应的安装包 我这里为Windows10 64位 故选择下载第一个安装包 2 然后点击安装 选择自己要安装的路径 此处我选择的是 D Program Files no
  • 容器适配器【stack、queue、priority_queue和反向迭代器】

    全文目录 适配器原理 stack 和 queue deque 模拟实现stack 模拟实现queue 模拟实现priority queue 反向迭代器 适配器原理 适配器 适配器是一种设计模式 设计模式是一套被反复使用的 多数人知晓的 经过
  • 如何延长周末体验感?工作与休息的完美平衡

    引言 对于工作繁忙的人们 周末是一段宝贵的时间 是放松身心 恢复精力的机会 然而 很多人常常发现 即使是在周末 也无法获得高质量的休息 本文将分享一些关于如何延长周末体验感 提升休息质量的方法 从时间规划 体验感提升以及充分休息几个方向进行
  • 如何借助 AI ,生成专属图标? #iconify AI

    不到一分钟 就可生成个性化专属图标 这款 AI 图标工具有多神奇 iconify AI 在几秒钟内为应用程序 网站创建专业图标 告别传统应用图标设计的麻烦和费用 让 AI 设计用户的专属品牌图标 图源 iconify AI 如何用 icon
  • 什么是防抖,节流? js实现核心代码,以及应用场景?

    防抖和节流都是用于项目优化的手段 用来限制事件的触发频率的两种常见技术 什么是防抖 在事件被触发后 等待一段时间 如果在这段时间内没有再次触发该事件 则执行相应的操作 如果在定时等待期间又触发的该事件 则重新计时 主要用于处理频繁触发的事件