学习目标:
- 掌握性能优化
学习内容:
- 防抖
- 节流
- 清除定时器的问题
- 综合案例
防抖:
防抖:单位事件内,频繁触发事件,只执行最后一次
。
举个栗子:王者荣耀回城,只要被打断就需要重新来。
使用场景:
搜索框搜索输入
。只需用户最后
一次输入完,再发送请求。- 手机号、邮箱验证
输入检测
。
<title>利用防抖来处理-鼠标经过盒子显示文字</title>
<style>
.box {
width: 500px;
height: 500px;
background-color: #ccc;
color: #fff;
text-align: center;
font-size: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="./lodash.min.js"></script>
<script>
//利用防抖实现性能优化
//需求:鼠标在盒子上抖动,里面的数字就会变化 +1
const box = document.querySelector('.box')
let i = 1
function mouseMove() {
box.innerHTML = i++
//如果里面存有大量消耗性能的代码,比如dom操作,比如数据处理,可能造成卡顿
}
//添加事件
// box.addEventListener('mousemove', mouseMove)
//利用Lodash库实现防抖 500毫秒之后采取+1
//语法:_.debounce(fun,时间)
// box.addEventListener('mousemove', _.debounce(mouseMove, 500))
//手写防抖函数
//核心是利用setTimeout 定时器来实现
//1.声明定时器变量
//2.每次鼠标移动(事件触发)的时候都要先判断是否有定时器,如果有先清除以前的定时器
//3.如果没有定时器,则开启定时器,存入到定时器变量里面
//4.定时器里面写函数调用
function debounce(fn, t) {
let timer
//return 返回一个匿名函数
return function () {
//2.3.4
if (timer) clearTimeout(timer)
timer = setTimeout(function () {
fn() //加个小括号 调用fn函数
}, t)
}
}
box.addEventListener('mousemove', debounce(mouseMove, 500))
// debounce(mouseMove, 500) //调用函数
// debounce(mouseMove, 500) = return function () {2.3.4}
</script>
</body>
节流:
节流:单位时间内,频繁触发事件,只执行一次
。
简单理解:在500ms内,不管触发多少次事件,只执行一次
。
举个栗子:王者荣耀技能冷却,期间无法继续释放技能。
使用场景:
高频事件:鼠标移动mousemove
、页面尺寸缩放resize
、滚动条滚动scroll
等等。
<title>利用节流来处理-鼠标经过盒子显示文字</title>
<style>
.box {
width: 500px;
height: 500px;
background-color: #ccc;
color: #fff;
text-align: center;
font-size: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="./lodash.min.js"></script>
<script>
//利用节流实现性能优化
//需求:鼠标在盒子上抖动,里面的数字就会变化 +1
const box = document.querySelector('.box')
let i = 1
function mouseMove() {
box.innerHTML = i++
//如果里面存有大量消耗性能的代码,比如dom操作,比如数据处理,可能造成卡顿
}
//添加事件
// box.addEventListener('mousemove', mouseMove)
//利用Lodash库实现节流 500毫秒之后采取+1
//语法:_.throttle(fun,时间)
// box.addEventListener('mousemove', _.throttle(mouseMove, 500))
//手写一个节流函数 每隔 500ms + 1
//1.声明一个定时器变量
//2.当鼠标每次滑动都先判断是否有定时器了,如果有定时器则不开启新定时器
//3.如果没有定时器则开启定时器,记得存到变量里面
//3.1定时器里面调用执行的函数
//3.2定时器里面要把定时器清空
function throttle(fn, t) {
let timer = null
return function () {
if (!timer) {
timer = setTimeout(function () {
fn()
//清空定时器
timer = null
}, t)
}
}
}
box.addEventListener('mousemove', throttle(mouseMove, 500))
</script>
</body>
清除定时器的问题:
<title>清除定时器的问题</title>
</head>
<body>
<script>
let timer = null
timer = setTimeout(() => {
clearTimeout(timer)
console.log(timer) //结果是几呢? 1
}, 1000)
// 在setTimeout 中是无法删除定时器,因为定时器还在运作,
//所以使用 timer = null ;
//而不是 clearTimeout(timer)
</script>
</body>
综合案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>综合案例-节流综合案例</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 1200px;
margin: 0 auto;
}
.video video {
width: 100%;
padding: 20px 0;
}
.elevator {
position: fixed;
top: 280px;
right: 20px;
z-index: 999;
background: #fff;
border: 1px solid #e4e4e4;
width: 60px;
}
.elevator a {
display: block;
padding: 10px;
text-decoration: none;
text-align: center;
color: #999;
}
.elevator a.active {
color: #1286ff;
}
.outline {
padding-bottom: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<a href="http://pip.itcast.cn">
<img src="https://pip.itcast.cn/img/logo_v3.29b9ba72.png" alt="" />
</a>
</div>
<div class="video">
<video src="https://v.itheima.net/LapADhV6.mp4" controls></video>
</div>
<div class="elevator">
<a href="javascript:;" data-ref="video">视频介绍</a>
<a href="javascript:;" data-ref="intro">课程简介</a>
<a href="javascript:;" data-ref="outline">评论列表</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>
//1.获取元素 要对视频进行操作
const video = document.querySelector('video')
video.ontimeupdate = _.throttle(() => {
// console.log(video.currentTime) //获得当前的视频时间
//把当前的时间存储到本地存储
localStorage.setItem('currentTime', video.currentTime)
}, 1000)
//打开页面触发事件,就从本地存储里面取出记录的事件,赋值给 video.currentTime
video.onloadeddata = () => {
// console.log(11)
video.currentTime = localStorage.getItem('currentTime') || 0
}
</script>
</body>
</html>