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
Detailed explanation of Vue project packaging
Table of contents 1. Related configuration Case 1...
Vue realizes adding watermark to uploaded pictures (upgraded version)
The vue project implements an upgraded version of...
HTML Marquee character fragment scrolling
The following are its properties: direction Set th...
Seven different color schemes for website design experience
The color matching in website construction is ver...
Analysis of the difference between the usage of left join setting conditions in on and where in mysql
This article uses examples to illustrate the diff...
JavaScript to achieve lottery effect
This article shares the specific code of JavaScri...
Meta viewport makes the web page full screen display control on iPhone
In desperation, I suddenly thought, how is the Sin...
js implements some functions of the input component in Element and encapsulates it into a component (example code)
Currently implemented are basic usage, clearable,...
Classification of web page color properties
Classification of color properties Any color can ...
Analysis of Linux boot system methods
This article describes how to boot the Linux syst...
Element-ui directly clicks on the cell in the table to edit
Table of contents Achieve results Implementation ...
What we have to say about CSS absolute and relative
Written in the opening: Absolute said: "Rela...
Linux's fastest text search tool ripgrep (the best alternative to grep)
Preface Speaking of text search tools, everyone m...
Process parsing of reserved word instructions in Dockerfile
Table of contents 1. What is Dockerfile? 2. Analy...
MySQL 5.7.19 winx64 free installation version configuration tutorial
mysql-5.7.19-winx64 installation-free version con...