Web project development JS function anti-shake and throttling sample code
StabilizationClassic application common: accordion effect IntroductionWebsite without anti-shake:
Websites with anti-shake:
Anti-shake scene 1 (mouse move in) Jitter: The user does not intend to trigger this interaction, but the interaction event is accidentally triggered due to accidental mouse jitter. Function anti-shake: If a user triggers an event multiple times in a row, only the last one will be executed. Solution principle: Turn on the timer. If the event is triggered multiple times within the interval, clear the previous timer each time. Example and solution code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Animation-Case Study "Accordion"</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 2400px;
}
#box {
width: 1200px;
height: 400px;
border: 1px solid red;
margin: 100px auto;
overflow: hidden;
}
#box li {
width: 100px;
height: 400px;
float: left;
transition: all 0.5s ease-out;
}
#box li.over {
width: 800px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li v-for="(item,index) in list" :class="{over:overIndex == index}" @mouseenter="doEnter(index)">
<img :src="item" alt="">
</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el:'#box',
data:{
overIndex:0,
list:[
'./images/collapse/1.jpg',
'./images/collapse/2.jpg',
'./images/collapse/3.jpg',
'./images/collapse/4.jpg',
'./images/collapse/5.jpg',
],
timeID:null
},
methods: {
doEnter(index){
/* Enable anti-shake*/
//1.1 Clear the last timer first, and use this time as the reference clearTimeout(this.timeID)
//1.2 Start the timer (anti-shake interval)
this.timeID = setTimeout(()=>{
this.overIndex = index;
},500)
}
},
})
</script>
</body>
</html>
Anti-shake scene 2 (keyboard keys) Classic application scenario: search for associated words
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="Please enter the search content">
<script>
let timeID = null;
document.querySelector('input').oninput = function(){
/* Function anti-shake */
//(1) Clear the previous timer clearTimeout(timeID) first
//(2) Enable the anti-shake timer timeID = setTimeout(() => {
console.log( this.value );
}, 500);
}
</script>
</body>
</html>
Function throttling Concept: Solve performance problems caused by high-frequency events; High-frequency events: In the page, some events are triggered very frequently. Solution: If a user triggers an event multiple times in a row, it will only be triggered once within a specified time. Example and solution code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
height: 3000px;
}
</style>
</head>
<body>
<script>
let lastTime = null;
let i = 1;
window.onmousemove = function(){
/* Function throttling */
//(1) Determine the time interval between two trigger events let time = Date.now()
if( time - lastTime >= 500 ){
console.log('Number of mouse moves: ' + i++);
//(2) This trigger time is used as the next reference interval lastTime = time
}
}
// let j = 1;
// window.onscroll = function(){
// //(1) Determine the time interval between two triggering events// let time = Date.now()
// if( time - lastTime >= 500 ){
// console.log('Number of mouse scrolls: ' + j++);
// //(2) This trigger time is used as the reference interval for the next time // lastTime = time
// }
// }
</script>
</body>
</html>
The above is the details of the sample code for JS function anti-shake and throttling in web project development. For more information about JS function anti-shake and throttling in web projects, please pay attention to other related articles on 123WORDPRESS.COM! You may also be interested in:
|
<<: MySQL merges multiple rows of data based on the group_concat() function
>>: Implementation of Nginx configuration and access to local static resources in Mac environment
Recommend
How to analyze SQL execution plan in MySQL through EXPLAIN
Preface In MySQL, we can use the EXPLAIN command ...
Detailed tutorial on how to deploy Springboot project using Nginx on the server (jar package)
1. Package the Java project into a jar package He...
A brief discussion on JS regular RegExp object
Table of contents 1. RegExp object 2. Grammar 2.1...
HTML head tag detailed introduction
There are many tags and elements in the HTML head ...
Detailed explanation of JavaScript Reduce
Table of contents map filter some every findIndex...
mysql5.7.14 decompressed version installation graphic tutorial
MySQL is divided into Community Edition (Communit...
A brief discussion on front-end production: Is IE6 still necessary for compatibility?
The domestic market still has a certain demand fo...
Detailed explanation of Nodejs array queue and forEach application
This article mainly records the problems and solu...
Install Apple Mac OS X in VMWare12 Graphic Tutorial
1. Introduction: Because my friend wanted to lear...
Mysql aggregate function nested use operation
Purpose: Nested use of MySQL aggregate functions ...
How to install and configure mysql 5.7.19 under centos6.5
The detailed steps for installing mysql5.7.19 on ...
Learn how to deploy and start multiple tomcats and migrate projects in one article
Table of contents Deploy tomcat 1. Download and d...
Detailed explanation of MySQL InnoDB index extension
Index extension: InnoDB automatically extends eac...
Docker container monitoring and log management implementation process analysis
When the scale of Docker deployment becomes large...
How to use Gitlab-ci to continuously deploy to remote machines (detailed tutorial)
Long story short, today we will talk about using ...