- 当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间；
- 当事件密集触发时，函数的触发会被频繁的推迟；
- 只有等待了一段时间也没有事件触发，才会真正的执行响应函数；
例如: 等等
第一个参数为函数 fn, 第二个参数延迟时间 delay
至此, 已经实现了一个简单的防抖函数
当原始函数有参数和需要用到this时, 可以给添加args接收参数并在调用函数fn时使用
首次触发时是否立即执行 接收一个参数 immediate, 定义一个默认值, 这里为false, 声明一个是否第一次激活的变量 isInvoke = false, 如果就执行函数并将 isInvoke = true, 如下代码
如果触发了事件又不需要了, 比如直接离开此位置, 增加取消功能防止事件触发带来意外不当
- 使用时便可以直接使用cancel方法
解决返回值问题, _debounce返回一个Promise, 调用原始函数fn时拿到返回值, 再调用 , 使用时通过获取返回值
在html中引入写好的防抖函数的文件debounce.js
- 如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数；
- 不管在这个中间有多少次触发这个事件，执行函数的频率总是固定的；
例如: 等等
时间间隔: ; 当前时间: ; 上次执行时间:
- 主要算出每次点击后剩余的时间
- 时间差 = 当前时间 - 上次执行时间
- 剩余时间 = 时间间隔 - 时间差 判断当剩余时间 <= 0 时执行函数
每次执行完之后将 lastTime = nowTime
初始值lastTime = 0, 所以第一次的也会很大, 减去很大的正数, 就会成为负数 < 0 所以默认第一次是执行的
如果 interval 不是特别大, 第一次就是执行的, 除非你设置的 interval 大于当前时间. 也就是从计算机元年(1970)到如今, 五十多年的频率, 这个节流可不简单 :)
如果想要第一次不执行, 拿到remainTime之前将 即可
最后是否执行, 需要使用到定时器 setTimeout
- 首先定义一个定时器 timer = null
- 如果 判断 timer 不为空是就清除定时器并置空, 执行完函数后直接 return
- 否则判断 trailing 为 true 且 timer 为 null 时, 设置一个定时器, 延迟时间就是剩余时间 remainTime
- 通过 timer 执行函数后关于 lastTime 最后应该设置为什么, 取决于 leading 的值
- 当 leading 为 true 时, 相当于2.2简单实现, 将lastTime赋值当前时间, 这里重新获取当前时间
- 当 leading 为 false 时, 直接将 lastTime 初始化为0, 相当于2.3.1 leading, 为0时下次执行将会进入
- 因此
与防抖实现相同, 使用apply绑定this和传参数, 返回Promise来解决返回值问题 最终代码如下:
也可使使用回调函数callback来处理返回值
学习自老师, 感谢老师
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/3594.html