目录：
一、前言
相信大家在开发项目的时候肯定会遇到一些这样的问题：
-
搜索框搜索的提示，我们不可能说是用户输入一个字符提示马上出现，连续输入连续出现，这样连续性的请求服务器不仅对服务器造成了很大的压力，同样也降低了客户的体验度。
-
表单的提交，只要点击了提交所绑定的事件，那么都会进行提交操作，假如我们连续多次点击，就会一直提交，那么服务器拿到的只会是重复性的数据，同时多次连续的请求对服务器造成了很大了压力，并且还会影响客户的体验度。
那么如何解决以上的一些问题呢？对于输入框我们可以拿最后一次输入的值，也就是说等输入停止一段时间的时候我们向服务器请求。对于表单提交、动画之类的，我们可以等第一次动画或者请求结束之后，我们再进行下一次的。这样做就减轻了服务器的压力，以及一些容易出现的小Bug，并且用户的体验度也好了很多。
二、防抖策略
1、什么是防抖策略？
防抖策略（debounce）：是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。如上图所示，事件开始后，则执行，如果还没执行完成，下一次的事件又开始了，则终止上一次的事件，执行当前的事件。
举一个很形象的例子，比如我们玩的王者荣耀，英雄回城的时候，点击回城则开始回城并且进度条开始更新，再次点击则从头开始计时，也就是重新开始回城，那么这就是运用的防抖的特点。
2、防抖的应用场景
- 用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源；
- 页面滚动条监听的事件，你可以通过防抖策略，只有在你最后一次滚动的时候，才能触发显示一些页面元素，这样做可以减轻浏览器的压力，节约了资源
3、实现
<!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" name="" id="">
<script src="./../lib/jquery-3.5.1.js"></script>
<script>
$(function() {
// 定义变量，存储定时器id
let timer = null;
$("input").on("input", function() {
// 清除上一次的计时器
clearTimeout(timer);
// 再次创建计时器，1s后执行
timer = setTimeout(() => {
console.log("搜索了");
}, 1000)
})
})
</script>
</body>
</html>
</html>
4、淘宝搜索推荐
（1）效果展示
（2）源码奉上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搜索框推荐</title>
<script src="../lib/jquery-3.5.1.js"></script>
<!-- 导入模板引擎 -->
<script src="../lib/template-web.js"></script>
<link rel="stylesheet" href="../lib/bootstrap.css">
<style>
.list-group-item {
width: 899px;
}
.list-group-item:hover {
background-color: #cccccc;
cursor: pointer;
}
</style>
</head>
<body style="padding: 10%;">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">百度搜索框</h3>
</div>
<div class="panel-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="输入内容..." id="search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">百度一下</button>
</span>
</div>
<ul class="list-group" id="list">
<script type="text/html" id="template-list">
{{ each result }}
<li class="list-group-item">{{ $value[0] }}</li>
{{ /each }}
</script>
</ul>
</div>
</div>
<script>
$(function() {
// 记录防抖的计时器id
let timer = null;
// 记录接口中存在值的键值对
const cache = {};
// 【1】搜索框添加键盘松开的事件
$("#search").on("keyup", function() {
// 键盘每次抬起的时候都清空上一次创建的计时器
clearTimeout(timer);
// 每按下一个键，弹起的时候就获取搜索框的内容，并清除两端空格
let keyword = $(this).val().trim();
// 判断字符串的长度是小于等于0
if (keyword.length <= 0) {
// 则ul标签隐藏
return $("#list").hide();
}
// cache不等于空对象，并且有对应的上次搜素存储的键值
if (cache != {} && cache[keyword]) {
// 则不要请求服务器,调用防抖功能的函数，并将对象中对应的值作为参数传递
return preventShake(null, cache[keyword]);
}
//否则将输入的字符串作为参数，调用防抖功能函数，并请求服务器
preventShake(keyword);
});
// 防抖功能
function preventShake(keyword, data = null) {
// 记录计时器的id
timer = setTimeout(() => {
// 如果字符串存在，并且数据不存在
if (keyword && !data) {
// 调用ajax请求函数
GetKwlist(keyword);
} else {
// 调用模板引擎函数，渲染页面
readerList(data);
}
}, 500)
};
// 【2】根据搜索框内的关键字调用对应的接口,获取推荐内容
function GetKwlist(keyword) {
// 使用ajax中的jsonp处理跨域请求
$.ajax({
url: `https://suggest.taobao.com/sug?q=${keyword}`,
dataType: "jsonp",
success: function(data) {
// 调用模板引擎功能
readerList(data);
}
})
}
// 模板引擎功能
function readerList(data) {
console.log(data);
//如果接口返回的result的长度小于等于0，则代表没有推荐
if (data.result.length <= 0) {
// 清空ul中的所有子元素，并隐藏自己
return $("#list").empty().hide();
};
// 拿到搜索框中的内容，并去除两端空格，为键
var key = $("#search").val().trim();
// 替换掉对象中上一次的值，保存最新的值
cache[key] = data;
// 创建模板
var htmlstr = template("template-list", data);
// 将ul中的子元素清空，并添加新的推荐，并展示ul
$("#list").empty().html(htmlstr).show();
}
});
</script>
</body>
</html>
三、节流策略
1、什么是节流策略？
节流策略指：在固定时间内只触发一次操作，在周期内新事件触发不执行动作。如一秒内重复多次点击提交按钮，只执行一次操作。
翻译成人话就是：可以减少一段时间内事件的触发频率，比如你连续点击的话，必须等上一次点击的时间到了才触发，否则就等于白点。
2、节流的应用场景
- 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
- 懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；
3、节流阀
- 节流阀为空，表示可以执行下次操作；不为空，表示不能执行下次操作。
- 当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作了。
- 每次执行操作前，必须先判断节流阀是否为空。
注意：节流阀不必为null（空），当然我们还可以使用true和false来表示，后者反过来都行，只要能使用这样的原理那么都是节流
4、实现
<!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>
<button>点击</button>
<script src="../lib/jquery-3.5.1.js"></script>
<script>
$(function() {
// 定义一个节流阀
let flag = true;
$("button").on("click", function() {
// 如果上一次的操作还没完成，则直接返回
if (!flag) return false;
// 点击后，修改节流阀，直接将flag锁死
flag = false;
// 在1s后执行
setTimeout(() => {
console.log("点击了！");
// 以上操作完成后，修改节流阀，将flag释放
flag = true;
}, 1000)
})
});
</script>
</body>
</html>
四、防抖和节流的区别
- 防抖：如果事件被频繁触发，防抖能保证只有最有一次触发生效！前面 N 多次的触发都会被忽略！
- 节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
