防抖和节流(应用场景）
1、什么是防抖
防抖策略是当事件被触发后，延迟N秒后在执行回调，如果在这N秒中再次被触发，则重新计时
1.1防抖的引用场景
淘宝案例：
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<!-- 导入页面的基本样式 -->
<link rel="stylesheet" href="./css/search.css" />
<!-- 导入 jQuery -->
<script src="./lib/jquery.js"></script>
<!-- 导入模板引擎 -->
<script src="./lib/template-web.js"></script>
</head>
<body>
<div class="container">
<!-- Logo -->
<img src="./images/taobao_logo.png" alt="" class="logo" />
<div class="box">
<!-- tab 栏 -->
<div class="tabs">
<div class="tab-active">宝贝</div>
<div>店铺</div>
</div>
<!-- 搜索区域（搜索框和搜索按钮） -->
<div class="search-box">
<input id="ipt" type="text" class="ipt" placeholder="请输入要搜索的内容" /><button class="btnSearch">
搜索
</button>
</div>
<!-- @3搜索建议列表 -->
<div id="suggest-list"></div>
</div>
</div>
<!-- @4模板结构 -->
<script type="text/html" id="tpl-suggestList">
{{each result}}
<!--搜索建议项-->
<div class="suggest-item">{{$value[0]}}</div>
{{/each}}
</script>
<script>
$(function () {
// 1. 定义延时器的Id
var timer = null
// a 首先定义全局缓存对象
var cacheObj = {}
// 2. 定义防抖的函数 kw用户输入的键值
function debounceSearch(kw) {
//定义一个延时器
timer = setTimeout(function () {
//500毫秒之后触发函数用户发起的json请求
getSuggestList(kw)
}, 500)
}
// @1 为输入框绑定 keyup 事件
$('#ipt').on('keyup', function () {
// 3. 如果用户在500毫秒之内再次发送请求 就取消触发timer函数
clearTimeout(timer)
var keywords = $(this).val().trim()
if (keywords.length <= 0) {
//@6 搜索关键词为空时隐藏搜索建议列表
return $('#suggest-list').empty().hide()
}
// d 先判断缓存中(之前渲染的列表)是否有数据
if (cacheObj[keywords]) {
//如果有之前输入的数据 则return 数据显示 不进行下一步
return renderSuggestList(cacheObj[keywords])
}
// TODO:获取搜索建议列表
// console.log(keywords)
// getSuggestList(keywords)
// 4、重新调用防抖函数
debounceSearch(keywords)
})
// @2获取用户输入值
function getSuggestList(kw) {
$.ajax({
url: 'https://suggest.taobao.com/sug?q=' + kw,
dataType: 'jsonp',
success: function (res) {
// console.log(res)
//@6
renderSuggestList(res)
}
})
}
//@5定义渲染模板结构的函数
function renderSuggestList(res) {
if (res.result.length <= 0) {
return $('#suggest-list').empty().hide()
}
var htmlStr = template('tpl-suggestList', res)
$('#suggest-list').html(htmlStr).show()
// b. 获取到用户输入的内容，当做键
var k = $('#ipt').val().trim()
// c. 需要将数据作为值传给自定义缓存对象，进行缓存
cacheObj[k] = res;
}
})
</script>
</body>
</html>
1.2 输入框的实现：
## 2、缓存的搜索建议步骤：
1、定义一个全局的对象：
// a 首先定义全局缓存对象 var cacheObj = {}
2、将搜索结果保存到缓存对象中：
// b. 获取到用户输入的内容，当做键
var k = $('#ipt').val().trim()
// c. 需要将数据作为值传给自定义缓存对象，进行缓存
cacheObj[k] = res;
3、优先从搜索中获取数据：
// d 先判断缓存中(之前渲染的列表)是否有数据
if (cacheObj[keywords]) {
//如果有之前输入的数据 则return 数据显示 不进行下一步
return renderSuggestList(cacheObj[keywords]) }
3、什么是节流：
防止连续多次触发，n秒内连续多次触发则n秒内执行一次。目的：减少执行次数
3.1鼠标跟随效果案例：
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/jquery.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#angel {
position: absolute;
}
</style>
</head>
<body>
<img src="./angel.gif" alt="" id="angel" />
<script>
$(function () {
// 1. 获取到图片
var angel = $('#angel')
// 步骤1. 定义节流阀
var timer = null
// 2. 绑定 mousemove 事件
$(document).on('mousemove', function (e) {
// 步骤3：判断节流阀是否为空
if (timer) { return }
// 3. 设置图片的位置
// 步骤2：开启延时器
timer = setTimeout(function () {
$(angel).css('top', e.pageY + 'px').css('left', e.pageX + 'px')
console.log('ok')
timer = null
}, 16)
})
})
</script>
</body>
</html>
浙公网安备 33010602011771号