underscore.js js实用库
CDN链接
https://cdn.bootcss.com/underscore.js/1.9.1/underscore.js
underscore.js中文文档
官方中文文档
根据underscore.js库分析学习高质量的防抖节流函数源码。
防抖
注意：由于对知识的加深理解与学习，本人又重新更新了本文章
事件响应函数在一段事件后才执行，如果在这段时间内再次调用，则重新计算执行时间；当预定的时间内没有再次调用该函数，则执行事件响应函数（自我理解：在停止触发一定时间后在执行逻辑代码）
应用场景
- scroll事件滚动触发
- 搜索框输入查询
- 表单验证（表单信息输入完才验证）
- 按钮提交事件
- 浏览器窗口缩放，resize事件
第一版本
这些代码做基本的防抖是没问题的。
image.png
但为了使代码更加强壮💪，需要在第二版本解决两个问题：1、执行函数中this默认指向window问题；2、执行函数中事件对象event默认指向为undefined问题
image.png
第二版本
image.png
image.png
第三版本 传入第三个参数(该参数为布尔值，默认不传为false)实现鼠标移入立即执行需求
image.png
第三版本 防抖函数中的返回值和取消防抖操作
image.png
节流(更新中。。。)
原理：如果你持续触发事件，每隔一段时间，只执行一次事件(自我理解：不断触发期间只在一定时间间隔才会执行逻辑代码)
应用场景
1.DOM元素的拖拽功能实现
- 射击游戏
- 计算鼠标移动的距离
- 监听scroll滚动事件
第一版本 利用时间戳简单实现一版（鼠标首次滑动触发，结束不会被调用触发函数）
image.png
第二版本 利用定时器实现--鼠标进入第一次不会触发，鼠标离开最后一次会触发
image.png
第三版 结合头两版本实现 第一次会触发，最后一次也会触发
image.png
第四版本 传入第三个参数来控制3种情况下代码的执行结果
image.png
