目录
1、为什么需要防抖和节流？
（1）原因：有一些高频事件触发的场景下，我们不希望对应的事件处理函数执行多次
（2）应用场景：
- 滚动事件
- 输入的模糊匹配
- 轮播图切断
- 点击操作
- ......
浏览器默认情况下都会有自己的监听事件间隔（4~6ms），如果检测到多次事件的监听执行，或造成不必要的的资源的浪费
（3）举例场景：
界面上有一个按钮，我们可以连续多次点击执行
防抖：对于高频率操作，我们只希望识别一次点击，可以认为是第一次或者最后一次
节流：对于高频率操作，我们可以自己设置频率，让本来会执行很多次的事件触发，按照我们定义的频率减少触发的次数
2、防抖函数实现
（1）实现1：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="btn">按钮</button>
<script type="text/javascript">
var btn = document.getElementById('btn')
/**
* handle: 最终需要执行的事件监听
* wait：事件触发之后多就开始执行
* immediate：控制执行第一次还是最后一次，false执行最后一次
*/
function myDebounce(handle, wait, immediate){
// 参数类型判断及默认值处理
if (typeof handle !== 'function') throw new Error('handle must be an funciton')
if (typeof wait === 'undefined') wait = 1000
if (typeof wait === 'boolean') {
immediate = wait
wait = 1000
}
if (typeof immediate === 'boolean') immediate = false
// 所谓的防抖效果我们想要实现的就是有一个“人”可以管理 handle 执行次数
// 如果我们想要执行最后一次，那就意味着无论当前点击了多少次，前面的 n-1 次都无用
let timer = null
return function proxy() {
clearTimeout(timer)
timer = setTimeout(() =>{
handle()
}, wait)
}
}
// 定义事件执行函数
function btnClick() {
console.log('点击了')
}
// 当我们执行了事件按钮点击之后就会执行。。。返回的 proxy
btn.onclick = myDebounce(btnClick, false)
</script>
</body>
</html>（2）实现2
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="btn">按钮</button>
<script type="text/javascript">
var btn = document.getElementById('btn')
/**
* handle: 最终需要执行的事件监听
* wait：事件触发之后多就开始执行
* immediate：控制执行第一次还是最后一次，false执行最后一次
*/
function myDebounce(handle, wait, immediate){
// 参数类型判断及默认值处理
if (typeof handle !== 'function') throw new Error('handle must be an funciton')
if (typeof wait === 'undefined') wait = 1000
if (typeof wait === 'boolean') {
immediate = wait
wait = 1000
}
if (typeof immediate === 'boolean') immediate = false
// 所谓的防抖效果我们想要实现的就是有一个“人”可以管理 handle 执行次数
// 如果我们想要执行最后一次，那就意味着无论当前点击了多少次，前面的 n-1 次都无用
let timer = null
return function proxy(...arg) {
let self = this,
init = immediate && !timer
clearTimeout(timer)
timer = setTimeout(() =>{
timer = null
!immediate ? handle.call(self, ...arg) : null
}, wait)
// 如果当前传递的是 true,表示立即执行
// 如果想要实现只在第一次执行，那么可以添加上 timer = null 作判断
// 因为只要 timer 为 null，就意味着没有第二次点击
init ? handle.call(self, ...arg) : null
}
}
// 定义事件执行函数
function btnClick(ev) {
console.log('点击了111', this, ev)
}
// 当我们执行了事件按钮点击之后就会执行。。。返回的 proxy
btn.onclick = myDebounce(btnClick, 200, true)
// btn.onclick = btnClick()
</script>
</body>
</html>3、节流函数实现
节流函数有很多方法实现，这个方法比较全面
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
height: 5000px
}
</style>
</head>
<body>
<script type="text/javascript">
// 在自定义的一段时间内让事件进行触发
function myThrottle (handle, wait) {
if (typeof handle !== 'function') throw new Error('handle must be an function')
if (typeof wait === 'undefined') wait = 400
let previous = 0 // 定义变量记录上一次执行时的时间
let timer = null // 用它来管理定时器
return function proxy (...args) {
let now = new Date() // 定义变量记录当前执行的时刻时间点
let self = this
let interval = wait - (now - previous)
if (interval <= 0) {
// 此时说明这是一个非高频次操作，可以执行 handle
clearTimeout(timer)
timer = null
handle.call(self, ...args)
previous = new Date()
} else if(!timer) {
// 当我们发现当前系统中有一个定时器，就意味着我们不需要再开启定时器
// 此时说明这次的操作发生在了我们定义的频次时间范围内，那就不应该执行 handle
// 这个时候我们就可以自定义一个定时器，让 handle 在 interval 之后去执行
timer = setTimeout(() => {
clearTimeout(timer) // 这个操作只是将系统中的定时器删除了，但是 timer 中的值还在
timer = null
handle.call(self, ...args)
previous = new Date()
}, interval)
}
}
}
// 定义滚动事件监听
function scrollFn() {
console.log('滚动了')
}
window.onscroll = myThrottle(scrollFn, 600)
</script>
</body>
</html>
730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
