JavaScript anti-shake case study
principleThe principle of anti-shake is: you can trigger an event, but I must execute it n seconds after the event is triggered. If you trigger this event again within n seconds of an event being triggered, I will use the time of the new event as the basis and execute it n seconds later. In short, I will not execute until you trigger the event and no more events are triggered within n seconds. Case
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
<title>debounce</title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 200px;
line-height: 200px;
text-align: center;
color: #fff;
background-color: #444;
font-size: 30px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="debounce.js"></script>
</body>
</html>
function getUserAction(e) {
console.log(this);
console.log(e);
container.innerHTML = count++;
};
function debounce(func, wait) {
var timeout;
return function () {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(this, arguments); // Solve this and event object event
}, wait);
}
}
container.onmousemove = debounce(getUserAction, 1000); This is the end of this article about JavaScript anti-shake case study. For more relevant JavaScript anti-shake content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: mysql command line script execution example
>>: MySQL controls the number of attempts to enter incorrect passwords
Recommend
CSS draw a lollipop example code
Background: Make a little progress every day, acc...
What you need to know about filters in Vue
Table of contents Preface What is a filter How to...
Summary of some reasons why crontab scheduled tasks are not executed
Preface I recently encountered some problems at w...
Vue-Element-Admin integrates its own interface to realize login jump
1. First look at the request configuration file, ...
MySQL merges multiple rows of data based on the group_concat() function
A very useful function group_concat(), the manual...
A simple method to implement scheduled backup of MySQL database in Linux
Here are the detailed steps: 1. Check the disk sp...
Detailed explanation of the group by statement in MySQL database group query
1: Statement order of grouping function 1 SELECT ...
Detailed explanation of how to use Nginx + consul + upsync to achieve dynamic load balancing
Table of contents Prerequisites DNS domain name r...
Let IE6, IE7, IE8 support CSS3 rounded corners and shadow styles
I want to make a page using CSS3 rounded corners ...
Solution to HTML encoding problem in IE6 that causes JS error and CSS not being applied
It was found in the test that when the page defini...
Use Visual Studio Code to connect to the MySql database and query
Visual Studio Code is a powerful text editor prod...
MySQL database terminal - common operation command codes
Table of contents 1. Add users 2. Change the user...
MySQL character types are case sensitive
By default, MySQL character types are not case-se...
Windows 10 is too difficult to use. How to customize your Ubuntu?
Author | Editor Awen | Produced by Tu Min | CSDN ...
The problem of form elements and prompt text not being aligned
Recent projects involve the creation of a lot of ...