函数的防抖和节流简述

2023-11-19

防抖和节流:即 限制函数的执行次数

防抖和节流二者非常相似,但还是有细微的不同:

  1. 防抖:通过 setTimeout 的方式在一定的时间间隔内,将多次触发变成一次触发。

    比如用户在十秒内一直连续点击,但最后只会触发一次。

    简单举例:

function debounce(){
	var t = null;
	return function(){
		if(t){
			clearTimeout(t)
		}
		t = setTimeout(()=>{
			fn()
		},1000);
	}
}
  1. 节流:减少一段时间内的触发频率,比如5秒内只能触发一次

    如果用户在十秒内一直连续点击,则会触发两次。

    简单举例:

function throttle(fn,delay){
	var begin = 0;
	return function(){
		var cur = new Date().getTime();
		if(cur - begin > delay){
			fn.apply(this,arguments);
			begin = cur
		}
	}
}

节流相对于防抖而言实现起来更加简单,根据自己的喜好来选择使用哪个就好啦

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

函数的防抖和节流简述 的相关文章

  • 在 onclick 事件上请求麦克风

    有一天 我偶然发现了这个 Javascript 录音机的例子 http webaudiodemos appspot com AudioRecorder index html http webaudiodemos appspot com Au
  • 如何检查是否存在可能的路径?

    我正在开发一个基于 javascript 的实验性游戏 玩家必须在二维平铺地图上移动才能退出 请随意检查这个小提琴并演奏 http jsfiddle net moonlife 74vLd 我只是随机放置障碍物 但有时障碍物会挡住玩家和出口之
  • 通过纯 JavaScript 获取 div 的第 n 个子元素

    我有一个名为 myDiv 的 div 元素 我怎样才能得到 myDiv 的第n个孩子DOM https en wikipedia org wiki Document Object Model操纵 Markup function reveal
  • 角度垫排序不适用于带点表示法的 matColumnDef

    我正在尝试按列对表进行排序 当我必须过滤另一个结果中的结果时 就会出现问题 我尝试通过括号表示法和点表示法访问该属性 但没有给出结果 还将最终节点放置在 matColumnDef 中 但失败 因为有 2 列同名 table table
  • 仅在 Chrome 上我收到此错误:Uncaught TypeError: Illegal constructor [关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 当我在 Chrome 上加载 jQuery 时 我会收到此错误 Uncaught TypeError Illegal constr
  • 从对象中取出具有无效(NaN、空白等)值的键的最佳方法?

    我有一个供用户填写的简短搜索表单 将有多个搜索查询进入 MongoDB 该表单创建一个名为的变量searchParams可能看起来像这样 var searchParams city Springfield bedrooms 3 bathro
  • Pjax动画

    我终于让 pjax 工作了 但我还有另一个问题 如何添加一些 jquery 动画 如淡出 幻灯片旧内容和淡入 幻灯片新内容 默认情况下 pjax 只是更改内容 没有任何好看的效果 任何帮助将非常感激 此致 基本上 你有一堆事件 https
  • 如何设置必须输入特定数字的字段?

    我想知道如何创建一个需要输入特定数字或文本的字段 例如 激活码 以及在输入的确认答案的情况下移动到 网页 并且在未确认的情况下移动到 另一页面 的按钮 使用必需的属性
  • 如何按 Angular 表中的属性(该属性具有单个 rownspan)进行分组?

    我没有找到这个问题的合适标题 我的问题是 例如 我有一个包含两列的表 列汽车品牌和列汽车型号 我希望表是 like in this picture 换句话说 品牌名称只会出现 1 次 我的输入数组采用以下 json 格式 brand Aud
  • JSONP 使用 JQuery 从 HTTPS 协议获取 JSON

    我正在尝试获取从 https 安全站点发送的 JSON 客户端希望不要使用任何服务器端语言 全部都是 Javascript 我读到 当使用 Jquery 中的 ajax 函数时 我必须使用 JSONP 才能从安全站点加载 JSON 我的第一
  • 嵌套 DIV 的类似斑马的 CSS 样式

    我嵌套了 DIV 元素 但我不知道嵌套的级别 我需要每个都有与其父级不同的背景 创建类似斑马的颜色 我只使用两种背景 深色和白色 效果需要类似于在容器中设置奇数和偶数子级的样式 但在我的例子中 子级是嵌套的 我可以使用每个嵌套元素的规则来做
  • 引用自身的 Javascript 对象...有问题吗?

    由于 Javascript 允许通过引用分配复合值 因此如果 Javascript 对象引用自身 它将创建无限的引用集 如控制台中所示 这看起来像是某种无限循环 但 Chrome 似乎没有问题 这样做是否存在任何内存问题或其他风险 就记忆力
  • jQuery 中什么函数相当于 .SelectMany()?

    让我解释一下 我们知道 jQuery 中的映射函数充当 Select 如 LINQ 中 tr map function return this children first returns 20 tds 现在的问题是我们如何在 jQuery
  • 绘制多边形

    我正在使用 Google Maps API V3 根据路径绘制多边形 该路径是随机未排序坐标点 LatLng 的数组 这会产生以下形状 Polylines intersect Problem 由于多边形的形状取决于路径中点的顺序 因此如何对
  • 如何使用 javascript 更改文件扩展名

    有谁知道在 Javascript 中更改文件扩展名的简单方法吗 例如 我有一个带有 first docx 的变量 但我需要将其更改为 first html 这将改变字符串包含文件名 let file first docx file file
  • 使用 File API polyfill 读取数据 URL

    我正在尝试使用文件 API 库 https github com mailru FileAPI https github com mailru FileAPI 作为不支持文件 API 的浏览器的后备 以便将文件作为数据 URL 读取并将其传
  • 如何为 jQuery 插件设置私有变量?

    我想创建一个简单的插件 它使用元素的文本作为默认值 或者您可以在调用插件时设置此值 但是 如果我不设置该值 并为多个元素调用插件 则默认值会成倍增加 function fn reText function options var setti
  • 使圆圈与 d3.js 上的多线匹配相同的颜色过滤?

    我有一个多线图 当按每种水果过滤时会更新 每条线条颜色对应不同的销售年份 在 的帮助下Shashank https stackoverflow com users 5569282 shashank 每个数据点线上的圆圈已添加到组中 而不是直
  • Chrome 调试器注入 javascript

    我有这样的好奇心 是否可以以某种方式在我的页面中注入 javascript 并执行它并调试它 正如您在控制台中所做的那样 但在控制台中您无法暂停并观察变量 是否可以调试我通过控制台输入的代码 为什么无法调试通过 XHR 接收的代码 Than
  • 区分 NaN 输入和输入类型为“number”的空输入

    我想使用 type number 的表单输入 并且只允许输入数字

随机推荐

  • 华为云计算之rainbow迁移原理

    华为云计算之rainbow迁移原理 一 华为rainbow迁移工具适用场景 1 rainbow介绍 2 业务迁移的应用场景 3 业务迁移顺序设计 二 迁移流程图 1 Windows块级迁移原理 2 Linux文件级迁移原理 三 rainbo
  • Dynamics 365应用程序开发 - 6. 使用Microsoft Flow自动化业务流程

    在上一章中 我们了解了如何使用Microsoft PowerApps轻松创建自定义商业应用程序 在本章中 我们将了解Microsoft Flow 它可以定义为一种基于云的服务 使用户能够构建跨多个应用程序和服务自动化不同任务和流程的工作流
  • 常见的Restrictions用法

    Restrictions eq Restrictions ne Restrictions allEq 利用Map来进行多个等于的限制 Restrictions gt Restrictions ge Restrictions lt Restr
  • v-show控制隐藏与显示--案例

    v show简介 1 v show指令的作用是 根据切换元素的显示状态 2 原理是修改元素 的display 实现显示隐藏 3 指令后面的内容 最终都会解析为布尔值 4 值为true元素显示 值为false元素隐藏 除了 v if v sh
  • selenium 获取某元素的 某属性 的值

    selenium 获取某元素的 某属性的值 1 先通过元素定位 获得此元素的 WebElement WebElement yuansu driver findElement By className buttonInput1 text 2
  • 显式的实例化与外部模板的声明

    2 12 2 显式的实例化与外部模板的声明 深入理解C 11 C 11新特性解析与应用 第2章保证稳定性和兼容性 本章中的新特性基本上都遵循了该设计思想 本节为大家介绍显式的实例化与外部模板的声明 作者 Michael Wong IBM X
  • Zookeeper之ZAB协议

    1 概念 Zookeeper使用 种称为Zookeeper Atomic Broadcast ZAB Zookeeper原 消息 播协议 的协议作为其数据 致性的核 算法 ZAB协议并不像Paxos算法那样 是 种通 的分布式 致性算法 它
  • 电脑修改用户(User)文件夹名称

    情景 Windows 11 的用户名与 C 盘 系统盘 中的文件夹名称不对应 可能是由于重装系统导致的 例如我笔记本中系统用户名是 fly 但文件夹名称却是 16490 Step 1 打开Administrator账户 搜索 cmd 右键
  • 二、字符串(36)392. 判断子序列

    392 判断子序列 给定字符串 s 和 t 判断 s 是否为 t 的子序列 字符串的一个子序列是原始字符串删除一些 也可以不删除 字符而不改变剩余字符相对位置形成的新字符串 例如 ace 是 abcde 的一个子序列 而 aec 不是 进阶
  • 关于游戏设计状态

    状态转移在数学里究竟是干嘛的我也不多说了 毕竟大家都是做游戏的 也不需要这么高深的数学知识 我就从一个实例开始讲一下吧 看不懂那我也没办法了 死套公式也行 只要调整下系数问题也不大 以武器强化为例 武器强化等级假如总共有十个等级 从一级开始
  • 数据结构----对称矩阵压缩存储中下标的计算

    一 压缩存储的概念 首先看一个对称矩阵 以深灰色为对称轴 由于矩阵内数据对称 因此只需将任意一边的数据存储起来即可 考虑到存储单元的线性结构 我们可以以一维数组的形式将其存储起来 需要存储的元素为 各个元素对应在一维数组中的位置示意图 按行
  • vue3+element+sortablejs实现table表格 行列动态拖拽

    vue3 element sortablejs实现table动态拖拽 1 第一步我们要安装sortablejs依赖 2 在我们需要的组件中引入 3 完整代码 4 效果 5 扩展 判断要拖动的行能不能拖动并放置到新位置 1 第一步我们要安装s
  • Promise {}

    Promise
  • 二叉树的链式结构实现

    文章目录 前言 链式结构实现 创建结点结构体 构建树逻辑结构 遍历二叉树 计算二叉树高度 结点数 叶子数 前言 对于一般的二叉树 非完全二叉树 满二叉树 而言 用顺序表去存储 会造成空间的浪费 所以一般采用链式结构实现 对于非完全非满二叉树
  • 前端Tabs表单的使用

  • 【codeforces #290(div 1)】ABC题解

    A Fox And Names time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standard o
  • 08-10章

    第8章 函数 1 def 定义函数 2 形参 实参 3 位置实参 关键字实参 可给形参指定默认值 4 返回值 使用reture语句将值返回到调用函数的代码行 5 让实参变成可选的 将某个形参设置为空值 6 返回字典 7 向函数传递列表 在函
  • 学海无涯苦作舟

    作者在Twitter上发的一条短讯 每一天 你一定要一起床就热情澎湃 否则 你就只是在打工 3 51 PM 2012 5 1 在我们创办Stack Overflow网站之后 有些人开始承认 我们构造了一个还过得去的 捕鼠器 把大家都吸引到那
  • 拷贝构造函数 浅拷贝与深拷贝

    目录 拷贝构造函数 浅拷贝 深拷贝 拷贝构造函数 上一期中我们讲述了构造函数的相关内容 谈到构造函数在形式上有几种分类 即带参数的 不带参数的以及参数列表初始化的 还有一种传引用的构造函数 称为拷贝构造函数 顾名思义 就是起到拷贝的功能 通
  • 函数的防抖和节流简述

    防抖和节流 即 限制函数的执行次数 防抖和节流二者非常相似 但还是有细微的不同 防抖 通过 setTimeout 的方式在一定的时间间隔内 将多次触发变成一次触发 比如用户在十秒内一直连续点击 但最后只会触发一次 简单举例 function