共计 685 个字符,预计需要花费 2 分钟才能阅读完成。
函数节流
一个函数执行一次后,只有大于设定的执行周期才会执行第二次.
function throttle(fn, delay) {
// 记录上一次函数触发的工夫
var lastTime = 0
return function () {
// 记录以后函数触发工夫
var nowTime = Date.now()
if (nowTime - lastTime > delay) {fn()
lastTime = nowTime
}
}
}
测试:
document.onscroll = throttle(function () {console.log('事件触发' + Date.now())
}, 200)
利用:
- 滚动加载,加载更多或滚动到底部监听
- 谷歌搜寻框,搜寻联想性能
- 高频点击提交,表单反复提交
函数防抖
一个须要频繁触发的函数 在规定事件内 只让最初一次失效 后面的不失效
function debounce(fn, delay) {
// 记录上一次延时器
var timer = null
return function () {
// 革除上一次的延时器
clearTimeout(timer)
// 从新设置新的延时器
timer = setTimeout(() => {fn()
}, delay)
}
}
测试:
<button id="btn"> 按钮 </button>
document.getElementById('btn').onclick = debounce(function () {console.log('点击事件被触发了')
}, 1000)
利用 :
- 手机号、邮箱正则输出检测
- 搜寻框输出:用户最初一次输出完,再发送申请
- 窗口大小:窗口调整实现后,计算窗口大小,避免反复渲染
正文完