【连载】手摸手解析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的源码


总结

相关文章
|
4月前
|
Web App开发 缓存 前端开发
浏览器常见面试题目及详细答案解析
本文围绕浏览器常见面试题及答案展开,深入解析浏览器组成、内核、渲染机制与缓存等核心知识点。内容涵盖浏览器的主要组成部分(如用户界面、呈现引擎、JavaScript解释器等)、主流浏览器内核及其特点、从输入URL到页面呈现的全过程,以及CSS加载对渲染的影响等。结合实际应用场景,帮助读者全面掌握浏览器工作原理,为前端开发和面试提供扎实的知识储备。
165 4
|
4月前
|
存储 安全 Java
2025 最新史上最全 Java 面试题独家整理带详细答案及解析
本文从Java基础、面向对象、多线程与并发等方面详细解析常见面试题及答案,并结合实际应用帮助理解。内容涵盖基本数据类型、自动装箱拆箱、String类区别,面向对象三大特性(封装、继承、多态),线程创建与安全问题解决方法,以及集合框架如ArrayList与LinkedList的对比和HashMap工作原理。适合准备面试或深入学习Java的开发者参考。附代码获取链接:[点此下载](https://pan.quark.cn/s/14fcf913bae6)。
1353 48
|
4月前
|
前端开发 JavaScript 开发者
2025 最新 100 道 CSS 面试题及答案解析续篇
本文整理了100道CSS面试题及其答案,涵盖CSS基础与进阶知识。内容包括CSS引入方式、盒模型、选择器优先级等核心知识点,并通过按钮、卡片、导航栏等组件封装实例,讲解单一职责原则、样式隔离、响应式设计等最佳实践。适合前端开发者巩固基础、备战面试或提升组件化开发能力。资源地址:[点击下载](https://pan.quark.cn/s/50438c9ee7c0)。
105 5
2025 最新 100 道 CSS 面试题及答案解析续篇
|
4月前
|
缓存 NoSQL Java
Java Redis 面试题集锦 常见高频面试题目及解析
本文总结了Redis在Java中的核心面试题,包括数据类型操作、单线程高性能原理、键过期策略及分布式锁实现等关键内容。通过Jedis代码示例展示了String、List等数据类型的操作方法,讲解了惰性删除和定期删除相结合的过期策略,并提供了Spring Boot配置Redis过期时间的方案。文章还探讨了缓存穿透、雪崩等问题解决方案,以及基于Redis的分布式锁实现,帮助开发者全面掌握Redis在Java应用中的实践要点。
194 6
|
4月前
|
NoSQL Java 微服务
2025 年最新 Java 面试从基础到微服务实战指南全解析
《Java面试实战指南:高并发与微服务架构解析》 本文针对Java开发者提供2025版面试技术要点,涵盖高并发电商系统设计、微服务架构实现及性能优化方案。核心内容包括:1)基于Spring Cloud和云原生技术的系统架构设计;2)JWT认证、Seata分布式事务等核心模块代码实现;3)数据库查询优化与高并发处理方案,响应时间从500ms优化至80ms;4)微服务调用可靠性保障方案。文章通过实战案例展现Java最新技术栈(Java 17/Spring Boot 3.2)的应用.
218 9
|
4月前
|
设计模式 安全 Java
Java 基础知识面试题全解析之技术方案与应用实例详解
本内容结合Java 8+新特性与实际场景,涵盖函数式编程、Stream API、模块化、并发工具等技术。通过Lambda表达式、Stream集合操作、Optional空值处理、CompletableFuture异步编程等完整示例代码,助你掌握现代Java应用开发。附面试题解析与技术方案,提升实战能力。代码示例涵盖计算器、员工信息统计、用户查询、模块化系统设计等,助你轻松应对技术挑战。
101 9
|
4月前
|
缓存 Java 索引
2025 年 Java 面试必备最常见 200 + 面试题及答案解析
这是一份针对Java面试的综合技术方案与应用实例文档,涵盖Java基础(JDK/JRE、字符串、IO流)、容器(ArrayList/LinkedList、HashMap)、多线程(线程创建、同步、线程池)、数据库(MySQL索引、Redis缓存穿透)及Spring框架(IOC容器、热部署)等核心模块。通过详细解析常见面试题,帮助读者深入理解并掌握Java核心技术,为应对面试提供全面指导。此外,还涉及反射、设计模式、JVM调优等进阶内容,助力开发者全面提升技能。代码示例可从提供的链接下载。
832 6
|
4月前
|
算法 安全 Java
2025 校招必看:Java 开发面试核心知识点深度解析及最新笔面试题汇总
本文针对2025校招Java开发面试,系统梳理了Java基础、集合框架、多线程并发、JVM等核心知识点,并附带最新笔面试题。内容涵盖封装、继承、多态、异常处理、集合类使用、线程同步机制、JVM内存模型及垃圾回收算法等。同时深入探讨Spring、数据库(MySQL索引优化、Redis持久化)、分布式系统(CAP理论、分布式事务)等相关知识。通过理论结合实例解析,帮助考生全面掌握面试要点,提升实战能力,为成功拿下Offer奠定坚实基础。
388 3
|
4月前
|
存储 缓存 安全
Java 集合容器常见面试题及详细解析
本文全面解析Java集合框架,涵盖基础概念、常见接口与类的特点及区别、底层数据结构、线程安全等内容。通过实例讲解List(如ArrayList、LinkedList)、Set(如HashSet、TreeSet)、Map(如HashMap、TreeMap)等核心组件,帮助读者深入理解集合容器的使用场景与性能优化。适合准备面试或提升开发技能的开发者阅读。
67 0
|
4月前
|
存储 缓存 安全
Java 集合篇面试题全面总结及答案解析
本文总结了Java集合框架的核心概念、常见集合类的特性与应用场景,以及开发中可能遇到的问题与解决方案。内容涵盖集合框架的基础接口(如Collection、Set、List、Map)、泛型的优点、线程安全集合类(如ConcurrentHashMap、CopyOnWriteArrayList)、常见集合类的区别(如ArrayList与LinkedList、HashMap与HashTable)等。此外,还详细介绍了如何实现LRU缓存、FIFO队列、优先级队列及栈等数据结构,并提供了相关代码示例。通过本文,读者可以全面掌握Java集合相关的面试知识点及其实际应用技巧。
132 1

推荐镜像

更多
  • DNS