js 防抖节流
防抖和节流目前是前端开发中最重要的 2 个函数
防抖使用场景
在输入框中输入自己搜索的内容
- 当输入男时,为了更好的体验,通常会出现对应的联想内容,发送一次网络请求
- 继续输入男士时,再一次发送请求,出现对应内容
- 在输入完男士夏季套装一共需要发送 6 次请求
但是事实上不根本不需要怎么多次请求
- 正确的做法应该是在合适的情况发送请求
- 例如用户快速输入男士夏季套装,那么就发送一次请求
- 例如用户每输入一个字停顿一会,这时就发送 6 次请求
节流使用场景
监听页面滚动事件
鼠标移动事件
按钮点击事件
- 在某个时间内,某个函数只能被触发执行一次
简单防抖函数实现
基本功能
- 当触发一个函数,不会立即执行这个函数,而是延迟(使用定时器)
- 如果延迟内有重新触发函数,那么取消上一个函数执行(取消定时器)
- 如果在延迟时间内,没有重新触发函数,函数正常执行
代码实现
1 | function debounce(fn, time) { |
优化参数和 this
通常 input 事件触发都会带有参数传递,而且触发函数的 this 指向当前元素节点
上方代码的 fn 函数是个普通的函数,this 指向 window,且没有携带参数
1 | function debounce(fn, time) { |
简单节流函数实现
基本功能
使用时间戳方式来实现
- 使用一个 last 记录上一次执行时间
- 每次执行前获取当前时间
1 | function throttle(fn, interval) { |