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%内容,订阅专栏后可继续查看/也可单篇购买
前端面试题 文章被收录于专栏
前端面试的一些常问问题、问题的具体实现(可直接运行)以及底层原理