防抖和节流
防抖【重要】
防抖策略:当事件被触发后,延迟n秒后再执行回调,如果在这n秒内事件又被触发,则重新计时
应用场景:
用户在输入框中连续输入一串字符串,可以通过防抖策略,只在输入完后,才执行查询的请求,这样可以有效的减少请求次数,节约请求资源
var timer = null //1-1防抖的timer
$('#ipt').on('keyup', function () {
// 1-3 清除timer
clearTimeout(timer)
//省略其他代码....
// 1-2定义防抖
// 获取搜索列表
timer = setTimeout(function () {
getSuggestList(keywords)
}, 800)
})
缓存搜索的列表
1 定义全局缓存对象
var cacheObj= {}
2:将搜索结果存储到缓存对象中
// 渲染UI结构
function renderSUggestList(res) {
// 如果没有数据需要渲染 直接return
if (res.result.length <= 0) {
return $('.suggest-list').empty().hide()
}
var rows = []
// console.log(res.result)
$.each(res.result, function (i, item) {
// console.log(item[0])
rows.push(`
<div class="suggest-item">${item[0]}</div>
`)
})
$('.suggest-list').empty().append(rows.join('')).show()
// 1获取用户输入的内容 当做键
var k = $('#ipt').val().trim()
// 将数据作为值 进行缓存
cacheObj[k] = res
// console.log(cacheObj)
}
3优先从缓存中获取搜索列表
$('#ipt').on('keyup', function () {
// 1-3 清除timer
clearTimeout(timer)
// 1获取用户输入的内容
var keywords = $(this).val().trim()
// 2 判断用户输入的内容是否为空
// 清空搜索列表
if (keywords.length <= 0) {
return $('.suggest-list').empty().hide()
}
// console.log(keywords)
// 先判断缓存中是否有数据
if (cacheObj[keywords]) {
return renderSUggestList(cacheObj[keywords])
}
// 1-2定义防抖
// 获取搜索列表
timer = setTimeout(function () {
getSuggestList(keywords)
}, 800)
})
节流【重点】
节流策略:可以减少一段时间内事件的触发频率
场景:
鼠标连续不断的触发某事件(点击),只在单位时间内触发一次
懒加载时要监听计算滚动条的位置,不必每次滑动都触发,可以降低计算的频率,而不必去浪费CPU资源
高铁卫生间是否被占用,由红绿灯控制,红灯表示被占用,绿灯表示可使用
每个人上厕所都要花费5分钟,五分钟之内,被占用的卫生间无法被其他人使用
上一个人使用完毕后,需要将红的重置为绿灯,表示下一个人可以使用卫生间
下一个人在上卫生间之前,需要先判断灯是否为绿灯,来知晓是否能上卫生间
节流阀为空,可以执行下次操作;不为空,不能执行下次操作
当前操作执行完,必须将节流阀重置为空,表示可以执行下次操作了
每次执行操作前,先判断节流阀是否为空
$(function () {
// 获取图片
var angel = $('#angel')
// 定义一个timer节流阀
var timer = null
$(document).on('mousemove', function (e) {
//每次执行操作前,先判断节流阀是否为空 不为空 不能执行(证明距离上次执行不足16毫秒)
if (timer) {
return
}
timer = setTimeout(function () {
console.log(e.pageX, e.pageY)
angel.css('top', e.pageY + 'px').css('left', e.pageX + 'px')
timer = null //设置了鼠标跟随效果后,清空节流阀 方便下次开启定时器
}, 160)
})
})
防抖和节流的区别
- 防抖:事件被频繁触发,防抖能保证只有最后一次触发生效,前面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>
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.search-box {
width: 500px;
margin: 50px auto;
}
.search-box input {
width: 200px;
height: 40px;
}
</style>
</head>
<body>
<div class="search-box">
<input type="text" id="ipt" placeholder="请输入要搜索的内容" />
<!-- 搜索列表 -->
<div class="suggest-list">
<!-- <div class="suggest-item"></div> -->
</div>
</div>
</body>
<script>
// 获取用户输入的搜索关键词
var timer = null //1-1 防抖的timer
var cacheObj = {} //定义全局的缓存对象
// 监听文本框的keyup事件
$('#ipt').on('keyup', function () {
// 1-3 清除timer
clearTimeout(timer)
// 1获取用户输入的内容
var keywords = $(this).val().trim()
// 2 判断用户输入的内容是否为空
// 清空搜索列表
if (keywords.length <= 0) {
return $('.suggest-list').empty().hide()
}
// console.log(keywords)
// 先判断缓存中是否有数据
if (cacheObj[keywords]) {
return renderSUggestList(cacheObj[keywords])
}
// 1-2定义防抖
// 获取搜索列表
timer = setTimeout(function () {
getSuggestList(keywords)
}, 800)
})
// 把获取搜索列表的代码,封装到getSuggestList函数中
function getSuggestList(kw) {
$.ajax({
url: 'https://suggest.taobao.com/sug?q=' + kw,
dataType: 'jsonp',
success(res) {
console.log(res.result)
renderSUggestList(res)
},
})
}
// 渲染UI结构
function renderSUggestList(res) {
// 如果没有数据需要渲染 直接return
if (res.result.length <= 0) {
return $('.suggest-list').empty().hide()
}
var rows = []
// console.log(res.result)
$.each(res.result, function (i, item) {
// console.log(item[0])
rows.push(`
<div class="suggest-item">${item[0]}</div>
`)
})
$('.suggest-list').empty().append(rows.join('')).show()
// 1获取用户输入的内容 当做键
var k = $('#ipt').val().trim()
// 将数据作为值 进行缓存
cacheObj[k] = res
// console.log(cacheObj)
}
</script>
</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>
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#angel {
position: absolute;
}
</style>
</head>
<body>
<img src="./ts.png" width="100" alt="" id="angel" />
</body>
<script>
$(function () {
// 获取图片
var angel = $('#angel')
// 定义一个timer节流阀
var timer = null
$(document).on('mousemove', function (e) {
//每次执行操作前,先判断节流阀是否为空 不为空 不能执行(证明距离上次执行不足16毫秒)
if (timer) {
return
}
timer = setTimeout(function () {
console.log(e.pageX, e.pageY)
angel.css('top', e.pageY + 'px').css('left', e.pageX + 'px')
timer = null //设置了鼠标跟随效果后,清空节流阀 方便下次开启定时器
}, 160)
})
})
</script>
</html>