面试必备之手写节流和防抖函数
手写防抖函数
<!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>
<div style="height: 1500px;"></div>
<script>
// 定义：触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间
// 搜索框搜索输入。只需用户最后一次输入完，再发送请求
// 手机号、邮箱验证输入检测 onchange oninput事件
// 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染
//参数：fn -> 要防抖的函数 wait -> 防抖的时间间隔 immediate ->是否立即执行(true为只执行第一次，false为只执行最后一次)
const debounce = (fn,wait,immediate) => {
let timer = null;
return (...args) => {
if(timer) clearTimeout(timer);
if(immediate && !timer){
fn.call(this,args);
}
timer = setTimeout(()=>{
fn.call(this,args);
},wait)
};
};
const betterFn = debounce(() => console.log("防抖执行了"),3000,true);
document.addEventListener("scroll",betterFn);
</script>
</body>
</html>
这里监听的是窗口滚动，已经比较简单的体现出防抖的作用。用到了闭包，理解起来可能会有点绕，仔细想想，应该就能相同其中的原理。
手写节流函数
<!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>
// 定义：当持续触发事件时，保证间隔时间触发一次事件
// 1.懒加载、滚动加载、加载更多或监听滚动条位置
// 2.百度搜索框，搜索联想功能
// 3.防止高频点击提交，防止表单重复提交
//参数：fn -> 要实现节流的函数 wait -> 要等待执行的间隔
const throttle = (fn,wait) => {
let pre = 0;
return (...args) => {
let now = Date.now();
if(now - pre >= wait){
fn.apply(this,args);
pre = now;
}
}
}
window.addEventListener("mousemove",throttle((e) => console.log("触发了节流函数",e),2000));
</script>
</body>
</html>
这里监听的是window窗口中的鼠标移动，也可以很好的展示节流的作用。原理比防抖函数要更好理解，也用到了闭包。