防抖:
触发高频事件n秒后只会执行一次,如果n秒内高频事件再次触发,重新计算时间
- input键盘输入事件,搜索关联内容
- resize浏览器窗口尺寸改变事件,移动端适配
封装代码:
事件绑定:
inputEle.oninput = bounce1(zxhs, 1000)
//第一个参数为触发执行函数,第二个为时间
事件监听:
inputEle.addEventListener('input',bounce(zxhs,1000))
function bounce(fn, n) {
let timeobj = null
return function () {
clearTimeout(timeobj)
timeobj = setTimeout(() => {
fn.call(this)
}, n)
}
}
function zxhs() {
console.log(this.value);
}
节流
触发高频事件n秒内只会执行一次,如果n秒内高频触发,时间结束后重新计算
- 按钮点击事件,重复点击
- 浏览器窗口滚动事件,重复滚动
function bounce1(fn, n) {
let flag = true
return function () {
if(flag==false)return
flag = false
setTimeout(() => {
fn.call(this)
flag = true
}, n)
}
}
防抖、节流
最新推荐文章于 2024-05-23 16:08:37 发布