Table of contents
1. The concept of throttling and anti-shake
1. The concept of throttling and anti-shake
2. Example demonstration
Introduction to Lodash | Lodash Chinese Documentation | Lodash Chinese Website (lodashjs.com)
<!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>
<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>
const box = document.querySelector('.box')
// 起始时间
let i = 0 // 让这个变量++
// 鼠标移动函数
function mouseMove() {
box.innerHTML = ++i
// 如果里面存在大量操作 dom 的情况，可能会卡顿
}
// box.addEventListener('mousemove', mouseMove)
// lodash 节流写法
//box.addEventListener('mousemove', _.throttle(mouseMove, 500))//500毫秒
// lodash 防抖的写法
box.addEventListener('mousemove', _.debounce(mouseMove, 3000))//3秒
</script>
</body>
</html> 
<!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>
<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>
const box = document.querySelector('.box')
let i = 0 // 让这个变量++
// 鼠标移动函数
function mouseMove() {
box.innerHTML = ++i //如果是 i++ 则要让变量初始值声明为 1
// 如果里面存在大量操作 dom 的情况，可能会卡顿
}
// 防抖函数
function debounce(fn, t) {
let timeId
return function () {
// 如果有定时器就清除
if (timeId) clearTimeout(timeId)
// 开启定时器 200
timeId = setTimeout(function () {
fn()
}, t)
}
}
// box.addEventListener('mousemove', mouseMove)
box.addEventListener('mousemove', debounce(mouseMove, 200))
</script>
</body>
</html>
<!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" />
<meta name="referrer" content="never" />
<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/[email protected]/lodash.min.js"></script>-->
<script src="./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(111)
video.currentTime = localStorage.getItem('currentTime') || 0
}
</script>
</body>
</html>After the page is refreshed, you can jump to the place you saw before.
Three, need attention
In the third example, there are two ways to introduce the lodash library,
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script src="./lodash.min.js" ></script>But it cannot be imported like this:
<script src="./lodash.min.js" type="module"></script>Otherwise, there will be an error message that the _ cannot be found
The main reason is:
type="module"Importing the Lodash library using requires the library itself to support the ES6 module import syntax . However, please note that Lodash has removed support for ES6 modules after version 4.17.3 (refer to the official documentation). Therefore, if you are using the latest version of Lodash, you should choose the traditional <script src="./lodash.min.js"></script>way to import.
To sum up, if you don't use any build tools, packaging tools or module loaders, you can directly <script src="./lodash.min.js"></script>import the Lodash library using . And if you are using modern project building tools (such as Webpack, Rollup, etc.) and doing modular development, you can use the importstatement to import Lodash modules.