【JavaScript】面试手撕节流

引入

上篇我们讲了防抖,这篇我们就谈谈防抖的好兄弟 – 节流。这里在老生常谈般的提一下他们两者之间的区别,顺带给读者巩固下。

PS: 开源节流中节流与这个技术上的节流,个人认为本质上是一样的。

  • 开源节流的节流指的是节省公司的金钱开支。
  • 前端技术上的节流指的是稀释函数的调用频率,节省CPU的开支。

区别

  • 节流: N 秒内只运行一次,若在N秒内重复触发,只有第一次生效
  • 防抖: N 秒后在执行该事件,若在N秒内被重复触发,则重新计时

不过我认为还是防抖那篇文章有个读者的评论更显生动 🐶, 在此对该读者表示感谢🙏。

  • 节流: 可以看做攻击间隔,点的再快没打出来也不会同时攻击两次。
  • 防抖: 可以理解为回城,每点一下就要重新跑.

节流例子

这里我举两个常见的🌰,大家有什么更好的🌰可以在评论里回复
这个王者荣耀的攻击例子也算是节流,不过这个我就不举了。🐶

生活例子

这里跟大家举一个生活例子,更显生动。

我们知道一般女神回复舔🐶的概率都是比较低的,假设女神每天回复舔🐶一次。也就是说如果今天女生已经回复过了,那么无论舔🐶发再多的信息对方也是不会回的。今天的次数已经消耗完毕了,也只能等明天才能刷新。

短信验证

我们知道短信验证是在生活中很常见,其实短信验证便用到了节流的技术。
因为发短信其实是要钱的,为了避免一个用户重复点击导致发出多条短信就要使用节流。比如获取一次验证码的有效时间为60秒,则60秒内这个发送短信的方法不能再次触发。

手撕代码

xdm,接下来开始手撕代码了。这里有两种实现方式,分别是时间戳实现和定时器实现。

时间戳实现

原理

每次事件触发都会检查距离上次执行的时间间隔,如果超过指定的等待时间delay,则执行函数。并且更新上一次执行时间为为当前的时间戳。

代码
function throttleByTimestamp(fn, wait) {let lastTime = 0; // 用于保存上一次执行的时间戳return function () {const currentTime = new Date().getTime();// 判断当前时间与上次执行时间差是否大于等待时间if (currentTime - lastTime > wait) {// 如果满足条件,则执行原函数,并传递参数fn.apply(this, arguments);// 更新上一次执行的时间戳为当前时间lastTime = currentTime;}};
}// 使用
const throttledFn = throttleByTimestamp(function () {console.log("节流函数被执行");
}, 500); // 每隔500毫秒执行一次// 等待时间
const waitTime = async (time) => {return new Promise((resolve) => {setTimeout(() => {resolve();}, time);});
};const main = async() => {throttledFn();// 换成 < 500ms的则只会执行一次await waitTime(600);throttledFn();
}main()/*** 输出:* 节流函数被执行* 节流函数被执行*/

定时器实现

原理

我们在事件触发时设置一个定时器。

  • 首次事件触发时,我们设置一个定时器,在等待一段时间后执行函数。
  • 当定时器触发前,如果有新的事件触发,我们会检查是否存在定时器,如果存在则跳过。
  • 当定时器触发时,会清除当前定时器,确保下一次事件能重新触发。
代码

注: 测试例子跟上面的一样,此处不在贴啦。

function throttleByTimer(fn, delay) {let timer;return function () {const context = this;const args = arguments;if (!timer) {timer = setTimeout(() => {fn.apply(context, args);clearTimeout(timer);timer = null;}, delay);}};
}

时间戳+定时器实现

我们回顾这两个实现方式,大家有没有发现这两个实现方式的区别?

  • 时间戳: 因为是拿当前时间减上一次触发的时间,所以一旦满足该条件,事件会立即执行。
  • 定时器: 由于fn.apply的函数写在了setTimeout里,所以触发了,也得等delay后才能执行,于是就有了这种事件停止触发后依然会再一次执行的效果。

如果我们要实现这样的一个需求,完成一个事件触发时立即执行,触发完毕还能执行一次的节流函数该如何做呢?

原理

此处借鉴掘金网友《6个瑞士卷》的分析,个人觉得逻辑写的很好。于是摘录了下来。

  • 需要在每个delay时间中一定会执行一次函数,因此在节流函数内部使用开始时间、当前时间与delay来计算remaining
  • remaining <= 0时表示该执行函数了,如果还没到时间的话就设定在remaining时间后再触发。
  • 当然在remaining这段时间中如果又一次发生事件,那么会取消当前的计时器,并重新计算一个remaining来判断当前状态。
代码
function throttle(fn, delay) {let timer;let lastTime = 0;return function () {let currentTime = Date.now();// 计算距离上次执行fn到现在过去了多少时间,与delay做比较let remaining = delay - (currentTime - lastTime);const context = this;const args = arguments;// 如果在remaining这段时间在发生,会取消当前的计时器clearTimeout(timer);// 当remaining <= 0时表示该执行函数了if (remaining <= 0) {fn.apply(context, args);lastTime = Date.now();} else {// 如果还没到时间的话就设定在remaining时间后再触发timer = setTimeout(fn, remaining);}};
}

借鉴文章

  1. JS简单实现防抖和节流

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/712417.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

databinding双向绑定原理,Android程序员最新职业规划

1. Android架构设计模式 MVC架构设计模式&#xff1a;MVC全名是Model View Controller&#xff0c;是模型(model)-视图(view)-控制器(controller)的缩写。MVP架构设计模式&#xff1a;MVC全名是Model View Persenter&#xff0c;MVP由MVC演变而来&#xff0c;是现在主流的开发…

小工具——抖音短视频评论自动同步

很多时候喜欢看抖音的评论&#xff0c;有时候评论也是一个查疑解惑的好地方&#xff0c;很多人也喜欢把抖音的评论集中起来做分析。 因为一个朋友问过我这回事&#xff0c;闲着的时候也研究了下抖音&#xff0c;所以自己做了个小工具&#xff0c;自动同步你观看的抖音短视频的…

Gophish+EwoMail 自建钓鱼服务器

GophishEwoMail 自建钓鱼服务器 文章目录 GophishEwoMail 自建钓鱼服务器1.前提准备2.搭建EwoMail邮件服务器1&#xff09;Centos7 防火墙操作2&#xff09;设置主机名3&#xff09;host配置4&#xff09;安装EwoMail5&#xff09;获取DKIM6&#xff09;端口服务介绍7&#xff…

黑马JavaWeb课程中安装vue脚手架出现的问题

1 安装node.js 要想前端工程化&#xff0c;必须安装node.js&#xff0c;前端工程化的环境。 在成功安装node.js后&#xff0c; 修改全局包安装路径为Node.js安装目录&#xff0c; 修改npm镜像源为淘宝镜像源&#xff0c;这里出现第一个问题&#xff0c;视频中给的淘宝镜像为&…

OnlyOffice Document Server部署的步骤和详细解说

OnlyOffice Document Server是一个免费的开源办公套件&#xff0c;支持在线查看和编辑Office文档。要部署OnlyOffice Document Server&#xff0c;可以通过多种方式进行&#xff0c;包括使用Docker、手动安装在Linux服务器上&#xff0c;或者直接安装在Windows服务器上。 以下…

Maven-私服(黑马学习笔记)

前面我们在讲解多模块开发的时候&#xff0c;我们讲到我们所拆分的模块是可以在同一个公司各个项目组之间进行资源共享的。这个模块的资源共享&#xff0c;就需要通过我们接下来所讲解的Maven的私服来实现。 首先我们先介绍一下什么是私服&#xff0c;以及它的作用是什么。再来…

力扣180 连续出现的数字

如何有效地识别在数据库中至少连续出现三次的数字&#xff1f; 目录 题目描述 解题思路 完整代码 进一步探索 题目描述 表&#xff1a;Logs ---------------------- | Column Name | Type | ---------------------- | id | int | | num | varch…

2024最新EasyRecovery磁盘数据恢复软件功能全面介绍

一、软件概述 EasyRecovery磁盘数据恢复软件是一款专业的数据恢复工具&#xff0c;旨在帮助用户从各种存储设备中恢复因各种原因丢失的数据。该软件凭借其强大的恢复能力、操作简便和高效稳定的性能&#xff0c;得到了广大用户的认可。 EasyRecovery-mac最新版本下载:https://…

数据库的简单了解及介绍

数据库&#xff08;Database&#xff09; 1.其本质是一个文件系统。保存了一系列有组织的数据 2.根据数据的结构处理&#xff0c;存储&#xff0c;管理数据的仓库 3.随着时代的发展&#xff0c;数据管理不再仅仅是存储和管理数据&#xff0c; 渐渐成为用户所需要的各种数据管理…

go 设置滚动日志

方案 通过 log/slog 实现结构化日志生成&#xff0c;这是go1.21中推出的新特性&#xff1b;通过 lumberjack 实现日志文件分割。 示例 package mainimport ("gopkg.in/natefinch/lumberjack.v2""log/slog""os""path/filepath" )fun…

工业人工智能需要注意的10件事

我们无法逃避人工智能这个风口&#xff0c;宣传人工智能软件的广告铺天盖地&#xff0c;似乎每个供应商都在推出最新的工具包&#xff0c;每天都有关于 ChatGPT、Bard 等新用例的文章。似乎全世界都在说&#xff1a;你现在需要人工智能&#xff01; 人工智能确实正在成为自动化…

Fabric V2.5 通用溯源系统——应用后端GIN框架部分设计

本节对Fabric V2.5 通用溯源系统的应用后端部分做一个简单的介绍,包括目录结构、文件作用、用户注册登录与农产品信息上链过程介绍。此节内容免费发布在TrueTechLabs Fabric学习交流QQ群。 购买专栏前请认真阅读:《Fabric项目学习笔记》专栏介绍 TrueTechLabs Fabric学习交流…

transformer--编码器1(掩码张量、注意力机制、多头注意力机制)

编码器部分: 由N个编码器层堆叠而成每个编码器层由两个子层连接结构组成第一个子层连接结构包括一个多头自注意力子层和规范化层以及一个残差连接。第二个子层连接结构包括一个前馈全连接子层和规范化层以及一个残差连接 掩码张量 什么是掩码张量 掩代表遮掩&#xff0c;码…

Ansible的playbook的编写和解析

目录 什么是playbook Ansible 的脚本 --- playbook 剧本 实例部署&#xff08;使用playbook安装启动httpd服务&#xff09; 1.编写一个.yaml文件 在主机下载安装http&#xff0c;将配置文件复制到opt目录下 运行playbook 在192.168.17.77主机上查看httpd服务是否成功开启…

DolphinScheduler——蔚来汽车数据治理开发平台的应用改造

目录 一、业务痛点 二、应用现状 三、技术改造 3.1 稳定性 3.1.1 滚动重启黑名单机制精准路由 3.2 易用性 依赖节点优化 补数任务优化 多 SQL 执行 原文大佬的这篇基于调度系统的数据治理案例有借鉴意义&#xff0c;这里摘抄下来用作学习和知识沉淀。 一、业务痛点 蔚…

Dell R730 2U服务器实践2:VMWare ESXi安装

缘起 刚到手边的一台Dell R730是三块硬盘raid0 &#xff0c;把我惊出一身冷汗&#xff0c;准备把它们改组成raid1 或者raid5 。 但是舍不得里面的ESXi 8 &#xff0c;寻找能否把raid0改成raid1 还不掉WSXi的方法&#xff0c;很遗憾没有找到。那样只能重装ESXi了。 ESXi软件下…

Linux系统上使用C语言创建线程

文章目录 一、使用C代码创建线程示例API 二、线程的相关知识2.1 线程 与 进程 的关系2.2 使用线程的理由 一、使用C代码创建线程 使用pthread_create函数创建线程。 示例 示例&#xff1a;创建一个线程&#xff0c;其作用就是打印线程ID和传入参数。 //demo1 #include <…

cookie和session对http的作用以及区别

HTTP协议本身是无法判断用户身份。所以需要cookie或者session。 1、什么是cookie&#xff1f; cookie 是由 Web 服务器保存在用户浏览器上的文件&#xff08; key-value 格式&#xff09;&#xff0c;可以包含用户相关的信 息。客户端向服务器发起请求&#xff0c;就提取浏览器…

基于串流技术的p2p共享桌面共享方案

研究远控有一定时间了&#xff0c;但真正落地运用的不多&#xff0c;所以也不太上心&#xff0c;平时也只是自己diy玩玩&#xff0c;远程共享看看电视剧。 最近生成式ai大火&#xff0c;直接带动了gpu应用的相关场景&#xff0c;相关场景&#xff0c;但gpu卡又贵&#xff0c;对…

[记录]-cannot import name ‘prelu‘ from ‘lasagne.layers‘

问题&#xff1a;cannot import name prelu from lasagne.layers 现有版本&#xff1a;lasagne 0.1,需要更新版本&#xff0c;直接pip installLasagne0.2 目前还不行 需要去源码下载 命令&#xff1a; pip install --upgrade https://github.com/Theano/Theano/archive/mas…