前端面试笔记6：防抖和节流
程序员文章站
2022-03-04 12:19:33
...
防抖和节流
什么是防抖和节流
防抖或是节流的含义是我们要通过某种方式去减少当前函数的执行次数。
函数防抖：在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。
函数节流：规定一个单位时间，在这个时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。
防抖的实现方式
这里不多说，直接上代码：
<!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">
<input type="submit" id="input">
<script>
var btn = document.getElementById('input');
btn.addEventListener('click', debounce(submit, 2000), false);
function submit(e) {
// console.log(e);
// console.log(this);
console.log(1);
}
// 通过防抖的方式实现
function debounce(fn, timer) {
// 定义记录计时器的变量 t
var t = null;
return function () {
// console.log(arguments[0]);
var firstClick = !t;
// 只要计时器 t 是存在的，那么我们就将这个计时器清掉
if (t) {
clearTimeout(t);
}
// 当计时器 t 为 null 的时候我们认为是第一次调用
if (firstClick) {
fn.apply(this, arguments);
}
t = setTimeout(() => {
t = null;
}, timer);
}
}
</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>
<input type="text">
<input type="submit" id="input">
<script>
var btn = document.getElementById('input');
btn.addEventListener('click', throttle(submit, 2000), false);
function submit(e) {
// console.log(e);
// console.log(this);
console.log(1);
}
// 通过节流的方式实现
function throttle(fn, delay) {
// 设置一个初始时间
var begin = 0;
return function () {
// 获取到执行函数的毫秒时间戳
var cur = new Date().getTime();
// 判断此时点击的时间和上一次点击的时间，如果两者之差大于 delay 的时间，那么才执行
if (cur - begin > delay) {
fn.apply(this, arguments);
// 执行完之后，更新 begin 的时间
begin = cur;
}
}
}
</script>
</body>
</html>
防抖和节流的适用场景
防抖和节流的目的都是通过某种方式来减少当前函数的执行次数的。所以自然应用在函数执行很频繁的场合。比如说一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。
还可以使用在鼠标移动触发的事件上面和 scroll 函数的事件监听上。
上一篇： 【前端面试笔记】CSS篇
下一篇： Java se之动态代理