Anti-shake throttling
- Anti-shake (debounce)
The so-called anti-shake means that the function can only be executed once within n seconds after the event is triggered. If the event is triggered again within n seconds, the function execution time will be recalculated. - Throttle
The so-called throttling means that events are triggered continuously but the function is only executed once in n seconds.
Throttling case
<style>
.box {<!-- -->
width: 500px;
height: 500px;
background-color: #ccc;
color: #fff;
text-align: center;
font-size: 100px;
}
</style>
<script>
const box = document.querySelector('.box')
let i = 1 // let this variable + +
//mouse movement function
function mouseMove() {<!-- -->
box.innerHTML = + + i
// If there are a lot of dom operations, it may get stuck.
}
// console.log(mouseMove)
// Throttle function throttle
function throttle(fn, t) {<!-- -->
//Start time
let startTime = 0
return function () {<!-- -->
// Get the current time
let now = Date.now()
// Determine if it is greater than or equal to 500 and call the function
if (now - startTime >= t) {<!-- -->
// Call functions
fn()
// Starting time = current time is written below the calling function
startTime = now
}
}
}
box.addEventListener('mousemove', throttle(mouseMove, 500))
// throttle(mouseMove, 500) === function () { console.log(1) }
// box.addEventListener('mousemove', function () {<!-- -->
// // Get the current time
// let now = Date.now()
// // Determine if it is greater than or equal to 500 and call the function
// if (now - startTime >= t) {<!-- -->
// // Call functions
//fn()
// // Starting time = current time is written below the calling function
// startTime = now
// }
// })
</script>
<body>
<div class="box"></div>
</body>
</html>
Throttling case
<style>
.box {<!-- -->
width: 500px;
height: 500px;
background-color: #ccc;
color: #fff;
text-align: center;
font-size: 100px;
}
</style>
<script>
const box = document.querySelector('.box')
let i = 1 // let this variable + +
//mouse movement function
function mouseMove() {<!-- -->
box.innerHTML = + + i
// If there are a lot of dom operations, it may get stuck.
}
// Anti-shake function
function debounce(fn, t) {<!-- -->
let timeId
return function () {<!-- -->
// If there is a timer, clear it
if (timeId) clearTimeout(timeId)
// Start timer 200
timeId = setTimeout(function () {<!-- -->
fn()
}, t)
}
}
// box.addEventListener('mousemove', mouseMove)
box.addEventListener('mousemove', debounce(mouseMove, 200))
</script>
<body>
<div class="box"></div>
</body>
The main difference between the two cases above is that in the first case, continuously moving the mouse will trigger an event every 500 milliseconds, while in the second case, continuously moving the mouse will only trigger an event once.
Use lodash writing method
<style>
.box {<!-- -->
width: 500px;
height: 500px;
background-color: #ccc;
color: #fff;
text-align: center;
font-size: 100px;
}
</style>
<script src="./lodash.min.js"></script>
<script>
const box = document.querySelector('.box')
let i = 1 // let this variable + +
//mouse movement function
function mouseMove() {<!-- -->
box.innerHTML = + + i
// If there are a lot of dom operations, it may get stuck.
}
// box.addEventListener('mousemove', mouseMove)
//lodash throttling writing method
// box.addEventListener('mousemove', _.throttle(mouseMove, 500))
// How to write lodash anti-shake
box.addEventListener('mousemove', _.debounce(mouseMove, 500))
</script>
<body>
<div class="box"></div>
</body>
Video playback positioning
When we usually quit watching a video and then watch the video again, it will automatically locate the position we last saw. This experience is very good. So how to achieve playback time recording? The video is played in seconds, so the playing time of the video can be recorded every second and recorded locally. Next time you enter this page, you can automatically get the record and jump to the playback progress of the video.
<!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>Comprehensive case</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="//i2.wp.com/pip.itcast.cn/img/logo_v3.29b9ba72.png" alt="" />
</a>
</div>
<div class="video">
<video src="//i2.wp.com/v.itheima.net/LapADhV6.mp4" controls></video>
</div>
<div class="elevator">
<a href="javascript:;" data-ref="video">Video introduction</a>
<a href="javascript:;" data-ref="intro">Course Introduction</a>
<a href="javascript:;" data-ref="outline">Comments list</a>
</div>
</div>
<script src="//i2.wp.com/cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script>
// 1. Get the element to operate on the video
const video = document.querySelector('video')
video.ontimeupdate = _.throttle(() => {<!-- -->
// console.log(video.currentTime) gets the current video time
// Store the current time into local storage
localStorage.setItem('currentTime', video.currentTime)
}, 1000)
// When the page is opened to trigger an event, the recorded time is retrieved from the local storage and assigned to video.currentTime.
video.onloadeddata = () => {<!-- -->
// console.log(111)
video.currentTime = localStorage.getItem('currentTime') || 0
}
</script>
</body>
</html>