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

2023-11-17

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

什么是防抖:

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

  核心原理 :

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

        

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

应用场景: 

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

什么是节流:

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

核心原理 :

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

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

应用场景:

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

       

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

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

随机推荐

  • 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实现核心代码,以及应用场景?

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