首页 > 其他分享 >实现一个节流函数? 如果想要最后一次必须执行的话怎么实现?

实现一个节流函数? 如果想要最后一次必须执行的话怎么实现?

时间:2023-03-06 10:35:09浏览次数:42  
标签:执行 节流 实现 timer delay let now prevTime 函数

// 节流就是在给定的time内代码会被执行一次 function throttle(fn, delay) {   let prevTime = 0; //上一次fn开始执行的时间   let timer; //为什么多次执行 throttle 后prevTime和timer还能保留原来的数据呢?因为这个节流函数用到了闭包,变量被保存在了内存中不被垃圾回收。   return function (...args) {     const now = Date.now();     const restTime = delay + prevTime - now; // 剩余时间     // 如果第二次执行超过delay了就立即执行     // restTime > delay 是为了处理两次fn执行期间修改了系统时间的情况,     // 比如把当前系统时间往过去调了十分钟,那么now其实是比prevTime小的,     // 那么 restTime 就可能是一个比较大的数了.     if (restTime <= 0 || restTime > delay) {       console.log("第一次触发的位置在这");       if (timer) {         clearTimeout(timer);         timer = null;       }       fn.apply(this, args);       prevTime = now;     } else if (!timer) {       // 这里就是为了处理1.5s停止触发的情况       // 以1.5s为例,delay为1s,这个时候我们设置一个定时器       // 让它在0.5s后执行       // 这样在整个过程中,就是第0s, 第1s,第2s分别执行一次,共三次       // 虽然我们是1.5s就停止触发了       // 这样就保证了最后一次动作一直可以执行       timer = setTimeout(() => {         console.log("之后触发的位置在这");         fn.apply(this, args);         prevTime = Date.now();       }, restTime);     }   }; }   // ================ // 测试用例 function func1(word) {   console.time("s");   let str = [1, 2, 3, 4, 5];   for (let i = 0; i < 1000; i++) {     str.push(i);     for (let j = 0; j < 1000; j++) {       str[i] = j;       for (let k = 0; k < 100; k++) {         str[k] = j;       }     }   }   console.log(word);   console.timeEnd("s"); }   let func = throttle(func1, 3000); for (let i = 0; i < 5; i++) {   func("世界和平"); }  

标签:执行,节流,实现,timer,delay,let,now,prevTime,函数
From: https://www.cnblogs.com/shidawang/p/17182852.html

相关文章

  • 实现一个批量请求函数, 能够限制并发量
    <!DOCTYPEhtml><htmllang="en"> <head>  <metacharset="UTF-8"/>  <metahttp-equiv="X-UA-Compatible"content="IE=edge"/>  <metaname="viewp......
  • PHP常用文件函数
    1、路径相关函数1、dirname()返回路径中的目录名称部分。2、basename()返回路径中的文件名部分。3、pathinfo()返回关于文件路径的信息。4、realpath()返回绝对路......
  • C++--引用和函数调用
             ......
  • Spring Boot 实现装饰器模式,真香!
    前言本文配合实战案例介绍我们平时在springboot项目里面怎么去用装饰器模式、多层装饰怎么玩。首先先说下装饰器模式是什么装饰器模式(DecoratorPattern)也称为包装......
  • ElasticSearch 实现分词全文检索 - Restful基本操作
    Restful语法GET请求:http://ip:port/index:查询索引信息http://ip;port/index/type/doc_id:查询指定的文档信息POST请求:http://ip;port/index/type/_search:......
  • 浅谈js防抖和节流
    防抖和节流是处理高频触发最常见的优化方式,对性能提升有很大的帮助。防抖:将多次的高频操作优化为只在最后一次执行,应用场景如:输入框,只需在最后一次输入进行校验即可。节......
  • Vue过滤器的使用详解(代码实现)
    过滤器的功能是对要显示的数据进行格式化后再显示,其并没有改变原本的数据,只是产生新的对应的数据 过滤器,其实不是必须要用的东西,它只是vue给我们提供的新的数据处理方式......
  • Fireasy3 揭秘 -- 使用 SourceGeneraor 实现动态代理(AOP)
    目录Fireasy3揭秘--依赖注入与服务发现Fireasy3揭秘--自动服务部署Fireasy3揭秘--使用SourceGeneraor改进服务发现Fireasy3揭秘--使用SourceGeneraor......
  • day02-项目实现01
    项目实现011.功能01-搭建Vue前端工程1.1需求分析使用Vue3的脚手架vue-cli工具,创建ssm的前端项目基础开发环境Vue-cli主要的功能是自动生成Vue的项目模板,提高开发效率......
  • 中断概念+设备树中的中断节点以及函数
    中断基础概念中断上下文设备树中的中断节点以及相关函数......