防抖
/*
防抖
短时间当中,触发大量事件,会浏览器造成很大压力
短时当中,我们触发最后一次事件;
防抖 > 短时间当中只触发最后一次
比如: 坐公交车的时候,当车的人满了之后,公交车才出发;
比如:王者荣耀英雄回城,规定时间5s回城,被人打断之后就会重新等待5s
*/
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<input type="text" placeholder="请输入账号">
<script>
function fn(e){
console.log("111111111");
console.log(e);
console.log("111111111");
}
const inp = document.querySelector("input")
inp.oninput = debounce(fn,2000)
function debounce(fn,time){
let timer = null;
return function(){
if(timer){
clearTimeout(timer);
}
timer = setTimeout(() => {
fn();
}, time);
}
}
</script>
</body>
</html>
节流
/*
节流:
将业务代码和节流代码分开
封装一个节流
短时间当中,触发少次事件
节流 > 短时间当中触发少次
比如: 坐公交车的时候,一个站点停一段时间,再触发;
比如:王者荣耀英雄技能的CD
*/
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<script>
function fn(e){
console.group("开始");
console.log(e);
console.groupEnd();
}
document.onmousemove = throttle(fn,500);
function throttle(fn,time){
let firstTime = 0;
return function(){
let nowTime = +new Date();
if(nowTime - firstTime < time){
return;
}
firstTime = nowTime;
fn.call(this,arguments[0]);
}
}
</script>
</body>
</html>