JS：手写防抖和节流（*****五颗星）
1.防抖
防抖：用户触发时间过于频繁，只要最后一次事件的操作，实现原理为设置一个定时器，约定在xx毫秒后再触发事件处理，每次触发事件都会重新设置计时器，直到xx毫秒内无第二次操作。
1.封装防抖代码如下：
//封装的防抖
function debounce(fn,delay){
let t=null
return function(){
if(t!==null){
clearTimeout(t)
}
t=setTimeout(()=>{
fn.call(this)
},delay)
}
}
2.防抖示例：
1.search搜索联想，用户在不断输入值时，用防抖来节约请求资源
<input type="text">
<script>
let inp=document.querySelector("input")
inp.oninput=debounce(function(){
console.log(this.value)
},500)
//封装的防抖
function debounce(fn,delay){
let t=null
return function(){
if(t!==null){
clearTimeout(t)
}
t=setTimeout(()=>{
fn.call(this)
},delay)
}
}
</script>
2.window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
<script>
window.onresize=debounce(function(){
let windowSize={
width:this.innerWidth,
height:this.innerHeight
}
console.log(windowSize)
},500)
//封装的防抖
function debounce(fn,delay){
let t=null
return function(){
i
剩余60%内容，订阅专栏后可继续查看/也可单篇购买
前端面试题 文章被收录于专栏
前端面试的一些常问问题、问题的具体实现（可直接运行）以及底层原理
美团一面2240人在聊
查看8道真题和解析