实现防抖函数
防抖函数原理:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时
// func是用户传入需要防抖的函数
// wait是等待时间
const debounce = (func, wait = 50) => {
// 缓存一个定时器id
let timer = 0
// 这里返回的函数是每次用户实际调用的防抖函数
return function(...args) {
// 如果已经设定过定时器了就清空上一次的定时器
if (timer) clearTimeout(timer)
// 开始一个新的定时器,延迟执行用户传入的方法
timer = setTimeout(() => {
func.apply(this, args)
}, wait)
}
}
适用场景:
按钮提交场景:防止多次提交按钮,只执行最后提交的一次 服务端验证场景:表单验证需要服务端配合,只执行一段连续的输入事件的最后一次,还有搜索联想词功能类似
使用
<input type="text" id="input">
<script>
function inputfun(value) {
console.log(value);
}
const debounces = debounce(inputfun, 500)
const ipt = document.getElementById("input")
ipt.addEventListener('keyup', function (e) {
debounces(e.target.value)
})
</script>
实现节流函数
节流函数原理:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效
// func是用户传入需要防抖的函数
// wait是等待时间
const throttle = (func, wait = 50) => {
// 上一次执行该函数的时间
let lastTime = 0
return function(...args) {
// 当前时间
let now = +new Date()
// 将当前时间和上一次执行函数时间对比
// 如果差值大于设置的等待时间就执行函数
if (now - lastTime > wait) {
lastTime = now
func.apply(this, args)
}
}
}
适用场景:
- 拖拽场景:固定时间内只执行一次,防止超高频次触发位置变动
- 缩放场景:监控浏览器resize
- 动画场景:避免短时间内多次触发动画引起性能问题