函数的节流与防抖
概念
- 事件频繁触发可能造成的问题?
- 一些浏览器事件:window.onresize、window.mousemove等，触发的频率非常高，会造成界面卡顿
- 如果向后台发送请求，频繁触发，对服务器造成不必要的压力
- 如何限制事件处理函数频繁调用
- 函数节流
- 函数防抖
- 函数节流(throttle)
- 理解:
- 在函数需要频繁触发时: 函数执行一次后，只有大于设定的执行周期后才会执行第二次
- 适合多次事件按时间做平均分配触发
- 场景：
- 窗口调整（resize）
- 页面滚动（scroll）
- DOM 元素的拖拽功能实现（mousemove）
- 抢购疯狂点击（click）
- 理解:
- 函数防抖(debounce)
- 理解:
- 在函数需要频繁触发时: 在规定时间内，只让最后一次生效，前面的不生效。
- 适合多次事件一次响应的情况
- 场景:
- 输入框实时搜索联想（keyup/input）
- 理解:
实现
防抖
function throttle(callback, wait) {
// 定义开始时间
let start = 0
// 返回一个函数
return function(event) {
// 获取当前时间戳
let now = Date.now()
// 判断
if (now - start >= wait) {
// 若满足条件，则执行回调
callback.call(this, event)
// 刷新开始时间
start = now
}
}
}
节流
function debounce(callback, time) {
// 定时器变量
let timer = null
// 返回一个函数
return function(event) {
// 判断
if (timer !== null) {
// 清空定时器
clearTimeout(timer)
}
// 启动定时器
timer = setTimeout(() => {
// 执行回调
callback.call(this, event)
// 重置定时器
timer = null
}, time)
}
}
测试
<!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>Document</title>
<style>
body {
height: 5000px;
}
</style>
</head>
<body>
<input type="text" class="input">
<script>
// 节流测试
document.addEventListener('scroll', throttle(function(e) {
console.log(e)
}, 500))
// 防抖测试
document.querySelector('.input').addEventListener('keydown', debounce(function(e) {
console.log(e.target.value)
}, 1000))
</script>
</body>
</html>
