共计 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)利用 :
- 手机号、邮箱正则输出检测
- 搜寻框输出：用户最初一次输出完，再发送申请
- 窗口大小：窗口调整实现后，计算窗口大小，避免反复渲染
正文完