是什么?
防抖和节流是限制函数执行次数的两种方法,主要应用于Ajax请求。
为什么?
当我们通过按钮进行ajax请求时,会出现连续点击多次按钮,就会重复请求多次ajax,这样子会影响用户的体验效果,也会对服务器造成一定的影响。
<!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>防抖与节流</title>
</head>
<body>
<input type="text" id="input">
<script>
let input = document.getElementById("input");
let span = document.createElement('span');
let num = 0;
input.addEventListener("input", inputEvent)
//输入事件
function inputEvent(e) {
console.log(e, this)
num++;//记录请求次数
span.innerHTML = `<p>第${num}次请求了接口</p>`;
document.body.appendChild(span);
}
</script>
</body>
</html>
如果你在1秒内输入123,那它就会在1秒内分别执行输入1、2、3时的事件。
如何使用?
一、防抖:通过设置setTimeout的方式,在一定的时间间隔内,将多次触发变成一次触发。
使用场景:登录、发短信等按钮避免用户点击太快,导致发送了多次请求,需要防抖。
<!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>防抖与节流</title>
</head>
<body>
<input type="text" id="input">
<script>
let input = document.getElementById("input");
let span = document.createElement('span');
let num = 0;
input.addEventListener("input", debounce(inputEvent, 200))
//输入事件
function inputEvent(e) {
console.log(e, this)
num++;//记录请求次数
span.innerHTML = `<p>第${num}次请求了接口</p>`;
document.body.appendChild(span);
}
//防抖
function debounce(fn, delay) {
//这里相当于定义了一个全局的timer
let timer = null;
return function () {
//如果定时器存在,那就清掉,开启新的计时器
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
}
}
</script>
</body>
</html>
如果你在200ms内输入123,那它只会执行输入3时的事件。
二、 节流:在一段时间内,只执行一次某个操作,减少一段时间的触发频率。
使用场景:浏览器input搜索框展示下拉列表,需要节流,也可以使用防抖。
<!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>防抖与节流</title>
</head>
<body>
<input type="text" id="input">
<script>
let input = document.getElementById("input");
let span = document.createElement('span');
let num = 0;
input.addEventListener("input", throttle(inputEvent, 1000))
//输入事件
function inputEvent(e) {
console.log(e, this)
num++;//记录请求次数
span.innerHTML = `<p>第${num}次请求了接口</p>`;
document.body.appendChild(span);
}
//节流
function throttle(fn, delay) {
//相当于在全局定义了一个timer
let timer = null;
return function () {
//如果timer存在,直接结束函数
if (timer) {
return
}
timer = setTimeout(() => {
fn.apply(this, arguments);
//指定时间结束后,将timer变成null,否则这个函数将一直不执行
timer = null
}, delay);
}
}
</script>
</body>
</html>
如果你在一秒内输入123,那它只会执行输入1时的方法。