文章图片



文章图片



文章图片



文章图片



文章图片



文章图片



通俗理解防抖平时我们买手机或者相机 ， 都具有防抖功能 ， 相机的防抖和这里防抖逻辑上是一样的 。 当我们拿起相机记录视频的时候 ， 我们的手会不停的抖动 ， 但是拍出的视频却抖的却不是很厉害 ， 原因就是相机把n毫秒之内的抖动给忽略掉 ， 使相机的镜头始终保持在n毫秒之前的状态 。
节流物体在的移动在空间和时间上是连续的 ， 但是我们记录的视频却是一帧一帧的 ， 原因就是相机忽略了n毫秒内的物体移动 ， 以节省存储空间 。 这个过程可以理解为节流 。
其实说明一些问题未必要举和事物本身不一样的东西 ， 那接下来我们就拿开发网页时真是遇见的场景 。
真实场景场景你正在开发一个用户注册页面 ， 你家平台里规定 ， 昵称必须唯一 ， 但是不要等用户点击注册按钮的时候才去检查 ， 要做到尽快的去检查 。
首先我们想到 ， 每当输入框改变的时候 ， 我们就检查一次是否已经有人注册 。 如果用户很快速的输入 ， 显然这样查询太快 ， 对服务器压力太大 。
面对这个问题 ， 我们可以想到两个方案来解决 。
1. 防抖输入框的前后两次改变超过n毫秒才执行查询 ， 只要改变时间间隔小于n毫秒就不执行查询 。

2. 节流n毫秒内的改变只执行一次查询 。

是不是和相机的例子很像？
我们有了两种解决方案 ， 到了代码层面怎么实现呢？我们先试试用直截了当的方式实现一下 。
简单实现1. 防抖：
可以仔细分析一下 ， 这几行代码是不是上面的方案一 。
如果在1000毫秒内 ， 反复执行checkUsername函数 ， 那么setTimeout就会被反复清除 ， 并且反复设置一个新的1000毫秒的定时任务 。 直到你执行checkUsername的前后两次间隔超过1000毫秒 ， 定时任务才有机会执行一次 。
2. 节流：
可以分析一下这几行代码 。
第一次执行checkUsername的时候 ， !isRuning为ture ， 执行关键代码 ， 改变isRuning为true ， 设置一个1000毫秒后再把isRuning再改为false 。 那么 ， 当你在1000毫秒内反复执行checkUsername的话 ， 关键代码都不会执行 ， 只有等到定时器执行后 ， 再次执行checkUsername ， 才会执行关键代码 。
以上代码都是直接了当的实现了需求 。 但是防抖和节流的需求很多 ， 仔细分析 ， 我们发现 ， 有些代码属于样板代码 ， 和业务逻辑无关 ， 我们的业务逻辑就在TODO ， 所以 ， 我们能不能提炼一下呢？
重构防抖分离
首先 ， 你写了一个函数 ， 这个函接受两个参数 ， 参数的含义是 ， 一个是待执行的函数（TODO） ， 一个是时间间隔 。 函数返回一个函数 ， 这个函数就会被反复调用的话 ， 就会符合防抖的定义 。
应用
这样 ， 我们只需要关注业务代码就可以了 。
节流分离
应用
无甚好说 ， 不复杂 。 有疑问 ， 可留言 。
装饰器模式或许你的项目引入typescript ， 正好TS很好的支持装饰器模式 ， 于是你想用装饰器实现该功能 。 讲真 ， 这个方式更优雅 。
防抖分离先实现一个防抖的方法装饰器 。

如果不太理解装饰器的话 ， 可以看我前面的文章 ， 或者去网上查找 。 不过 ， 我的示例 ， 具有实际应用价值 。
核心代码和上面的基本一致 ， 这里要套用ts装饰器的语法 ， 及在里面如何使用this 。
应用这里借助Vue项目演示 。

应用无甚好说 。
节流也一并写出来 ， 无甚好说 。 有问题 ， 欢迎留言 。
节流抽离
应用
总结还有其它方式 ， 比如观察者模式 ， 大概思路是 ， 不断触发的那个事件转化成自定义事件 ， 然后在自定义事件里应用防抖或者节流把这个事件放缓 ， 最终由观察者处理这个放缓的事件 。 这个暂时就不写在这里了 。分页标题#e#
其实 ， 我们遇到问题 ， 一旦了解问题的现象及本质 ， 就可以搜寻自己的知识结构 ， 找到对应的解决方案 。
最后 需要这些面试资料的 ， 可以私信 666 领取

【相机|面试官：什么是防抖和节流？有哪些实现方式？】

来源：(清风酔)

【】网址：/a/2021/0224/kd735961.html

标题：相机|面试官：什么是防抖和节流？有哪些实现方式？