【连载】手摸手解析JS手写面试题题系列2——实现throttle(节流)方法

简介: 【连载】手摸手解析JS手写面试题题系列2——实现throttle(节流)方法

上一篇笔记聊了如何实现防抖(debounce)方法,其实防抖和节流方法的区别,在面试也是经常被问到的,所以我们在实现节流方法之前,先聊聊节流和防抖之间的区别,方便大家更好的理解这两个方法 防抖和节流的区别

举一个例子,比如你去饮水机接水喝,你疯狂的按那个出水按钮,这个时候节流和防抖就会有两种不同的表现(不严谨,但是可以粗浅的这么理解):

防抖的饮水机,它不管你按出水按钮按的多疯狂,它只会在你停下来之后开始出水,也就是说它把你频繁的多次操作都忽略了,它只响应你的最后一次操作

节流的饮水机,它不管你按出水按钮按的多疯狂,它只会按照它自己的节奏来出水,比如它只会间隔2秒出一次水,就算你手速再快,它也是按照自己的节奏来出水

上面这两个例子,可以让你比较粗浅的理解出防抖和节流之间的区别,迁移到我们平时写代码来说,可以考虑这两个例子:

防抖:比如联想输入框,其实不管你输入的再快,只需要在你输入结束之后把输入框内的字符拿到去搜索即可,所以这里就可以用防抖来优化,等用户输入停止后再去发1次请求就好,前面发了也是浪费

节流:比如页面上常见的拖拽功能,我们需要实时的获取当前的拖拽位置,因为拖拽这个事件的反馈频率非常的高,你稍微移动一下,可能会有几十上百次的事件响应,所以我们完全没必要对每一次的事件响应都做处理,这样子程序会卡死;此时就可以使用节流来优化,我们只需要隔几百毫秒去响应1次拖拽事件拿到当前的位置即可

我觉得我应该把防抖和节流的区别讲明白了,接下来是节流函数的实现


实现节流函数


写代码之前先默念我的编程座右铭:

先跑起来,再去优化

思考一下,其实节流函数就是做了这么个事儿,还是以饮水机为例:

首先规定饮水机的按钮不管按的多快,饮水机都是每隔一秒钟出一次水

那么我们的节流函数要做的事情就是,如果当前按饮水机的时间,距离上次出水的时间,正好是大于等于1秒,那么就可以出水,否则说明在1秒钟以内就被按了很多次,就不用出水

我们写一下伪代码:


如果当前时间-上次函数运行时间>=节流间隔时间
  运行函数,并且把上次函数运行时间更新为当前时间
否则
  不运行


写成代码是这样的:


function throttle(func, wait) {
    let start = 0;
    return function () {
        if (start === 0) {
            start = Date.now();
        } else {
            const now = Date.now();
            if (now - start < wait) {
                // 不执行
            } else {
                func();
                start = now;
            }
        }
    }
 }


再优化一下就是这样,可以接受自定义的参数


function throttle(func, wait) {
    let start = 0;
    return function (...args) {
        if (start === 0) {
            start = Date.now();
        } else {
            const now = Date.now();
            if (now - start >= wait) {
                func.apply(this, args);
                start = now;   
            }
        }
    }
}


当然了, 我这个实现方式并不是最完美的,比如说还可以加上首次执行、末次执行等等,感兴趣可以直接去啃lodash的源码


总结

相关文章
|
1月前
|
存储 缓存 NoSQL
Redis常见面试题全解析
Redis面试高频考点全解析:从过期删除、内存淘汰策略,到缓存雪崩、击穿、穿透及BigKey问题,深入原理与实战解决方案,助你轻松应对技术挑战,提升系统性能与稳定性。(238字)
|
3月前
|
存储 安全 测试技术
Python面试题精选及解析
本文详解Python面试中的六大道经典问题,涵盖列表与元组区别、深浅拷贝、`__new__`与`__init__`、GIL影响、协程原理及可变与不可变类型,助你提升逻辑思维与问题解决能力,全面备战Python技术面试。
149 0
|
30天前
|
监控 Java 关系型数据库
面试性能测试总被刷?学员真实遇到的高频问题全解析!
面试常被性能测试题难住?其实考的不是工具,而是分析思维。从脚本编写到瓶颈定位,企业更看重系统理解与实战能力。本文拆解高频面试题,揭示背后考察逻辑,并通过真实项目训练,帮你构建性能测试完整知识体系,实现从“会操作”到“能解决问题”的跨越。
|
2月前
|
JavaScript 前端开发 开发者
Nest.js控制器深度解析:路由与请求处理的高级特性
以上就是对 NestJS 控制层高级特性深度解析:从基本概念到异步支持再到更复杂场景下拦截其与管道等功能性组件运用都有所涉及,希望能够帮助开发者更好地理解和运用 NestJS 进行高效开发工作。
319 15
|
2月前
|
JavaScript 前端开发 IDE
TypeScript vs. JavaScript:技术对比与核心差异解析
TypeScript 作为 JavaScript 的超集,通过静态类型系统、编译时错误检测和强大的工具链支持,显著提升代码质量与可维护性,尤其适用于中大型项目和团队协作。相较之下,JavaScript 更灵活,适合快速原型开发。本文从类型系统、错误检测、工具支持等多维度对比两者差异,并提供技术选型建议,助力开发者合理选择。
594 1
|
2月前
|
存储 JavaScript 前端开发
JavaScript 语法全面解析
JavaScript 语法体系丰富且不断更新,从基础的变量声明、数据类型,到复杂的函数、对象、异步语法,每个知识点都需要开发者深入理解并灵活运用。本文梳理的 JS 语法核心内容,可为开发者提供系统的学习框架,后续还需通过大量实践(如编写交互组件、实现业务逻辑)巩固知识,逐步提升 JS 编程能力,应对前端开发中的各类挑战。
|
5月前
|
存储 安全 Java
2025 最新史上最全 Java 面试题独家整理带详细答案及解析
本文从Java基础、面向对象、多线程与并发等方面详细解析常见面试题及答案,并结合实际应用帮助理解。内容涵盖基本数据类型、自动装箱拆箱、String类区别,面向对象三大特性(封装、继承、多态),线程创建与安全问题解决方法,以及集合框架如ArrayList与LinkedList的对比和HashMap工作原理。适合准备面试或深入学习Java的开发者参考。附代码获取链接:[点此下载](https://pan.quark.cn/s/14fcf913bae6)。
3029 48
|
5月前
|
缓存 NoSQL Java
Java Redis 面试题集锦 常见高频面试题目及解析
本文总结了Redis在Java中的核心面试题,包括数据类型操作、单线程高性能原理、键过期策略及分布式锁实现等关键内容。通过Jedis代码示例展示了String、List等数据类型的操作方法,讲解了惰性删除和定期删除相结合的过期策略,并提供了Spring Boot配置Redis过期时间的方案。文章还探讨了缓存穿透、雪崩等问题解决方案,以及基于Redis的分布式锁实现,帮助开发者全面掌握Redis在Java应用中的实践要点。
315 6
|
5月前
|
NoSQL Java 微服务
2025 年最新 Java 面试从基础到微服务实战指南全解析
《Java面试实战指南:高并发与微服务架构解析》 本文针对Java开发者提供2025版面试技术要点,涵盖高并发电商系统设计、微服务架构实现及性能优化方案。核心内容包括:1)基于Spring Cloud和云原生技术的系统架构设计;2)JWT认证、Seata分布式事务等核心模块代码实现;3)数据库查询优化与高并发处理方案,响应时间从500ms优化至80ms;4)微服务调用可靠性保障方案。文章通过实战案例展现Java最新技术栈(Java 17/Spring Boot 3.2)的应用.
430 9
|
5月前
|
缓存 算法 NoSQL
校招 Java 面试高频常见知识点深度解析与实战案例详细分享
《2025校招Java面试核心指南》总结了Java技术栈的最新考点,涵盖基础语法、并发编程和云原生技术三大维度: 现代Java特性:重点解析Java 17密封类、Record类型及响应式Stream API,通过电商案例演示函数式数据处理 并发革命:对比传统线程池与Java 21虚拟线程,详解Reactor模式在秒杀系统中的应用及背压机制 云原生实践:提供Spring Boot容器化部署方案,分析Spring WebFlux响应式编程和Redis Cluster缓存策略。
146 0

热门文章

最新文章

推荐镜像

更多
  • DNS