费话不多少说,直接干代码,最后点击就可以实现防抖效果了
防抖函数
//html
<!-- 加入有一个点击的按钮 进行防抖的操作 -->
<button id="iding">点击事件</button>
//js
const times = (fn,delay)=>{
let time = null //置空时间
return ()=>{
if(time){
clearTimeout(time)
}
time = setTimeout(()=>{
fn.apply(this)
},delay)
}
}
//获取dom
let id = document.getElementById('iding')
let nice = times(fn,1000)
// 进行点击事件操作
id.addEventListener('click',function () {
nice()
})
//声明一个函数
function fn() {
console.log('触发了这个函数');
}
节流函数
//html
<!-- 添加一个按钮 进行节流的操作 -->
<button id="cal">节流</button>
//js
//声明一个函数的函数
const a = (fn,delay)=>{
let flag =true
return ()=>{
if(!flag) return
flag = false
setTimeout(()=>{
fn.apply(this)
flag = true
},delay)
}
}
//声明一个函数
function nn(){
console.log('执行的节流的函数');
}
//将函数调用的赋值给aa
let aa = a(nn,1000)
//获取当前的按钮的DOM
let id = document.getElementById('cal')
//点击模仿节流的过程
id.addEventListener('click', function () {
aa() //进行函数的调动
})