标签：防抖 函数 debounce callback 节流 wait
相关理解
- 一些浏览器事件:window.onresize、window.mousemove等，触发的频率非常高，会造成界面卡顿
- 如果向后台发送请求，频繁触发，对服务器造成不必要的压力
- 函数节流
- 函数防抖
函数节流(throttle)
- 在函数需要频繁触发时: 函数执行一次后，只有大于设定的执行周期后才会执行第二次
- 适合多次事件按时间做平均分配触发
- 窗口调整（resize）
- 页面滚动（scroll）
- DOM 元素的拖拽功能实现（mousemove）
- 抢购疯狂点击（click）
函数防抖(debounce)
- 在函数需要频繁触发时: 在规定时间内，只让最后一次生效，前面的不生效。
- 适合多次事件一次响应的情况
- 输入框实时搜索联想（keyup/input）
- 区别函数节流与防抖
API说明
- 语法: throttle(callback, wait)
- 功能: 创建一个节流函数，在 wait 毫秒内最多执行 callback 一次
- 语法: debounce(callback, wait)
- 功能: 创建一个防抖动函数，该函数会从上一次被调用后，延迟
wait 毫秒后调用 callback
代码实现
函数节流
/*
实现函数节流
- 语法：throttle(callback, wait)
- 功能：创建一个节流函数，在wait毫秒内最多执行'callback'一次
*/
export function throttle(callback, wait) {
let start: number = 0
// 返回一个事件监听函数（也就是节流函数）
return function (event) {
console.log('throttle event')
// 只有当距离上次处理的时间间隔超过了wait时，才执行处理事件的函数
const current = Date.now()
if(current - start > wait){
callback.call(this, event) // 需要指定this和参数
start = current
}
}
}
函数防抖
/*
实现函数防抖
- 语法：debounce(callback, wait)
- 功能：创建一个防抖动函数，该函数会从上一次被调用后，延迟`wait`毫秒后调用`callback`
*/
export function debounce(callbcak, wait){
// 用来保存定时器任务的标识id
let timeoutId = -1
// 返回一个事件监听函数（也就是防抖函数）
return function (event) {
console.log('debounce event')
// 清除未执行的定时器任务
if(timeoutId!==-1){
clearTimeout(timeoutId)
}
// 启动延迟 await 时间后执行的定时器任务
timeoutId = setTimeout(() =>{
// 调用callback处理时间
callbcak.call(this, event)
// 处理完后重置标识
timeoutId = -1
}, wait)
}
}
测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数节流与防抖</title>
</head>
<body>
<button id="handle">正常处理</button>
<button id="throttle">测试函数节流</button>
<button id="debounce">测试函数防抖</button>
<script src="../dist/atguigu-utils.js"></script>
<!-- <script src="../node_modules/atguigu-utils/dist/atguigu-utils.js"></script> -->
<script>
/* 处理点击事件的回调函数 */
function handleClick(event) { // 处理事件的回调
console.log('处理点击事件', this, event)
}
document.getElementById('handle').onclick = handleClick
document.getElementById('throttle').onclick = aUtils.throttle(handleClick, 2000)
document.getElementById('debounce').onclick = aUtils.debounce(handleClick, 2000)
</script>
</body>
</html>
标签：防抖,
函数,
debounce,
callback,
节流,
wait
From： https://www.cnblogs.com/bfyzzk/p/17697918.html