节流(throttle)
所谓节流,就是指连续触发事件但是在n秒内只执行一次函数
一般用于轮播图,鼠标移动,滚动条滚动
假如一张轮播图完成切换需要300ms,不加节流效果,快速点击,则嗖嗖嗖的切换
加上节流效果,不管快速点击多少次,300ms时间内, 只能切换一张图片。
节流案例:
要求:鼠标在盒子上移动,里面的数字就会变化+1利用节流的方式,鼠标经过,500ms ,数字才显示
<style>
.box {
width: 500px;
height: 500px;
background-color: #ccc;
color: #fff;
text-align: center;
font-size: 100px;
}
</style>
<div class="box"></div>
const box = document.querySelector('.box')
let i = 1
function mouseMove() {
box.innerHTML = i++
}
//节流函数
function throttle(fn, t) {
let starTime = 0
return function () {
let now = Date.now()
if (now - starTime >= 500) {
fn()
starTime = now
}
}
}
// throttle(mouseMove, 500)
box.addEventListener('mousemove', throttle(mouseMove, 500))
防抖(debounde)
所谓防抖,就是指触发事件后在n秒内函数只能执行一次,如果在n秒内又触发了事件,则会重新计算函数执行时间
北京买房政策:需要连续5年的社保,如果中间有一年断了社保, 则需要从新开始计算
比如,我2020年开始计算,连续交5年,也就是到2024年可以买房了,包含2020年,但是我2024年断社保了,整年没交,则需要从2025年开始算第一年往后 推5年...也就是2029年才能买房...
使用场景:搜索框防抖
案例:
鼠标在盒子上移动,鼠标停止之后,500ms后里面的数字就会变化+1
const box = document.querySelector('.box')
let i = 1
function mouseMove() {
box.innerHTML = i++
}
function debounce(fn, t) {
let timeId;
return function () {
if (timeId) {
clearTimeout(timeId)
}
timeId = setTimeout(function () {
fn()
}, t)
}
}
box.addEventListener('mousemove', debounce(mouseMove, 500))
利用lodash实现节流与防抖
节流
<script src="./lodash.min.js"></script>
<script>
const box = document.querySelector('.box')
let i = 1
function mouseMove() {
box.innerHTML = i++
}
box.addEventListener('mousemove', _.throttle(mouseMove, 500))
</script>
防抖
<script src="./lodash.min.js"></script>
<script>
const box = document.querySelector('.box')
let i = 1
function mouseMove() {
box.innerHTML = i++
}
box.addEventListener('mousemove', _.debounce(mouseMove, 500))
</script>