函数防抖
函数防抖是无论触发多少次都只执行最后一次，类似于我们在输入框远程匹配数据，在有效的间隔时间内以最后一次的输入为准
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数防抖</title>
</head>
<body>
<div>
<input type="text" id="dbinput">
</div>
<script>
// 获取input元素
let dbinput = document.getElementById('dbinput')
// 监听input的键盘输入事件
dbinput.addEventListener('keyup',
debounce(seatchData, 2000)
)
function seatchData() {
console.log('搜索数据===========')
}
// 函数防抖
function debounce(func, time) {
// 在返回的函数顶部设置一个定时器
let timer = null
return function() {
// 设置局部变量
let that = this
// 获取参数
let args = arguments
// 每次执行方法的时候都清除一下之前的定时器
clearInterval(timer)
// 同时重新生成一个定时器任务
timer = setTimeout(() => {
func(that, args)
}, time)
}
}
</script>
</body>
</html>
函数节流
函数节流是平均多久执行一次，固定时间内均会执行事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dataStructure</title>
</head>
<body>
<div>
<div id="throttle" style="width: 100%;height: 200px;background-color: aqua;" >
节流
</div>
</div>
<script>
let throttle = document.getElementById('throttle')
throttle.addEventListener('mousemove', throttleFun(mouseMove, 1000))
function mouseMove() {
console.log('mouseMove===')
}
// 函数节流
function throttleFun(fun, time) {
// 定义一个变量判断定时器是否在运行的变量
let isRun = false
// 设置一个定时器
let timer = null
return function() {
// 只有在定时器在非运行状态下才可进入，如果在运行状态下，让定时器先把事件执行完毕
if (!isRun) {
// 只要进入函数需要立即把定时器状态设置为true，防止再次进入此函数
isRun = true
timer = setTimeout(() => {
fun()
// 事件执行完毕后清除定时器
clearInterval(timer)
// 定时器状态设置为false，让新的事件重新进入函数
isRun = false
}, time)
}
}
}
</script>
</body>
</html>
