函数节省
根本概念
函数节省是高频率履行函数的一种优化方法，另一种方法是函数防抖，函数节省和函数防抖的区别是：
- 函数节省是在必定时刻内只履行一次函数。
- 函数防抖是在函数被触发必定时刻后再履行，假如在这时刻段内又被触发，则重新计时。
完成
throttleFn 完成了函数节省，回来的新函数履行时就会有节省作用。
throttleFn 函数有两个参数：要履行的函数 fn 和时刻段 delay, 回来的新函数会设置一个定时器，在 delay 时刻之后才会履行 fn 并清空 timeout。
假如在定时器到期之前这个新函数再次被调用，fn 不会履行，这儿定时器没有销毁，加上会更加谨慎些。
优化
定时器
定时器仅仅只是方案代码在未来的某个时刻履行(可是并不确保在该时刻点必定履行)。履行机遇是不能确保的，由于定时器只是在指定时刻后将履行的函数放入履行行列中等候履行，只有当进程闲暇时才会从履行行列中取出履行。
如图，添加了 200ms 的定时器，在 600ms 时会将要履行的函数放入履行行列中，这时主进程是闲暇状况，就会从履行行列中取出要履行的函数履行。
假如在 250ms 时添加了 100ms 的定时器，那么 350ms 时将要履行的函数放入履行行列中，但此刻主进程还在履行JavaScript代码，定时器代码最终是在 400ms 主进程闲暇后才履行。
时刻戳来完成函数节省
相对定时器有以下优势：
- 实时性：定时器的履行时刻或许会延后履行，时刻戳能更精确的控制函数的履行。
- 功用耗费：频频的创建定时器有必定的功用耗费，时刻戳的方法不必管理定时器。
- 履行方法：定时器是异步履行的，时刻戳是同步履行的。
缺陷：
- 履行函数假如是很耗时的操作，时刻戳的同步履行反而会堵塞进程而使得页面卡顿。
- 时刻戳的方法在最终一次履行的函数或许会被疏忽，导致没有记载到最终一次的状况。比如在图片懒加载顶用的话，就会出现问题。
图片懒加载的完成是 onscroll 事情中判别图片是否在可视区域内，onscroll 事情能够采用函数节省来进行优化，假如不记载最终一次 onscroll 事情的触发履行，就不能准确的判别图片最终是否在可视区域内。
useThrottleFn
VueUse 中运用 useThrottleFn 来完成函数节省。
运用
根本完成
首要 useThrottleFn 是采用时刻戳的方法来完成函数节省。
上面说到时刻戳的方法有两个问题：
第一个问题是履行函数假如是很耗时的操作的话，时刻戳的同步履行回来会堵塞进程而使得页面卡顿，这个问题能够将函数的履行转为异步来处理。
第二个问题是最终一次履行的函数或许会被疏忽，导致没有记载到最终一次的状况，处理这个问题能够采用定时器来设置最终一次履行。
函数加了 trailing 参数，为 true 时会履行间隔小于 delay 的加一个定时器作为最终一次履行。
异步处理
现在异步操作一般都是用 Promise 更好一些，因而对定时器做一层 Promise 封装便利获取回来值。
封装完之后，回来的新函数的回来值或许是 Promise 或者其他值，这儿统一回来 Promise 更便利运用者处理。
功用拆分
咱们能够将 throttleFn 函数里面的功用拆分封装。
节省的部分进行封装：
Promise 部分进行封装：
装备项扩展
添加this绑定
相似 Function.prototype.call 一样将 this 绑定的目标作为第一个参数：
运用：
初次不履行
有些场景下是期望节省的函数第一次不履行，比如在 loading 推迟赋值场景下。
loading 推迟赋值:
一般咱们在发送请求获取数据的时会显现一个 loading 的作用，意图告知用户当时正在加载数据，请等候。以提升用户体会，但假如获取数据的时刻很快的话，loading 的作用一闪而过反而体会不好。因而对loading 进行推迟赋值,也便是抽出一小段时刻用来网络请求,超出这段时刻再显现 loading，没有超出就不显现 loading,假如这一小段时刻够短，那么用户是几乎感知不到的。
第一次 throttledFn(true) 不立刻履行，而是等超过 500ms 才履行，这儿就需要函数节省初次调用不立刻履行。useThrottleFn 通过 leading 装备初次不履行。
ms 或许 Ref 目标或函数
完好代码：
rejectOnCancel 装备
rejectOnCancel 用于撤销定时器后触发 Promise 的 reject 方法。
细节优化
将 throttleFn 改名为 useThrottleFn，并调整参数顺序便利运用。
