JS防抖、节流
2021-12-13 本文已影响0人
香蕉不拿呢
在实际开发过程中经常会遇到防抖节流的问题，
处理不当或者放任不管就容易引起浏览器卡死。
场景：点击事件（click，mounsedown），滚动（scroll）事件，窗口大小改变事件（resize）等
一、简单版
防抖(debounce)
在一定时间内频繁触发，只执行最后一次
/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn,delay){
let timer = null;
return ()=>{
if(timer){
clearTimeout(timer)
timer = setTimeout(()=>{
fn()
},delay || 1500)
}
}
}
节流(throtte)
在一定时间内频繁触发，只执行第一次触发的事件
/*
* fn[function] 需要节流的函数
* delay[number] 毫秒，节流期限值
*/
function throtte(fn,delay){
let disbale = false;
return ()=>{
if(!disable){
disable = true;
setTimeout(()=>{
fn()
disable = false;
},delay)
}
}
}
二、优化版
2.1 arguments传递参数,apply调整this的指向
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<button id="click" type="button">点击</button>
<script>
let doc = document.getElementById('click')
doc.addEventListener('click',throlle(fn,2000))
function throlle(fn,delay){
let disable = false;
return function(){
console.log('点击了')
if(!disable){
disable = true
setTimeout(()=>{
fn.apply(this,arguments)
disable = false
},delay)
}
}
}
function fn(value){
console.log('执行了',value)
}
</script>
</body>
</html>
