目录:
一、前言
相信大家在开发项目的时候肯定会遇到一些这样的问题:
-
搜索框搜索的提示,我们不可能说是用户输入一个字符提示马上出现,连续输入连续出现,这样连续性的请求服务器不仅对服务器造成了很大的压力,同样也降低了客户的体验度。
-
表单的提交,只要点击了提交所绑定的事件,那么都会进行提交操作,假如我们连续多次点击,就会一直提交,那么服务器拿到的只会是重复性的数据,同时多次连续的请求对服务器造成了很大了压力,并且还会影响客户的体验度。
那么如何解决以上的一些问题呢?对于输入框我们可以拿最后一次输入的值,也就是说等输入停止一段时间的时候我们向服务器请求。对于表单提交、动画之类的,我们可以等第一次动画或者请求结束之后,我们再进行下一次的。这样做就减轻了服务器的压力,以及一些容易出现的小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 多次的触发都会被忽略!
- 节流:如果事件被频繁触发,节流能够减少事件触发的频率,因此,节流是有选择性地执行一部分事件!