JavaScript anti-shake case study

principle

The 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:

Implementation and usage scenarios of JS anti-shake throttling function
JavaScript deshaking and throttling examples
How to understand JS function anti-shake and function throttling
Javascript throttle function and debounce function
Strange problems encountered and solutions for JavaScript anti-shake and throttling
How to hand-write javascript throttling and deshaking functions in an interview
Application scenarios of js throttling and anti-shake, and specific implementation of throttling and anti-shake in vue
A brief discussion on JavaScript throttling and anti-shake functions

<<: mysql command line script execution example

>>: MySQL controls the number of attempts to enter incorrect passwords

Summary of common Nginx techniques and examples

JavaScript anti-shake case study

principle

Case

Summary of common Nginx techniques and examples

How to delete a MySQL table

MySQL 5.7.13 source code compilation, installation and configuration method graphic tutorial

MySQL 8.0.15 installation and configuration method graphic tutorial (Windows 10 X64)

Using better-scroll component in Vue to realize horizontal scrolling function

Detailed explanation of props and context parameters of SetUp function in Vue3

What is the relationship between Mapper sql statement fields and entity class attribute names

A brief discussion on the implementation principle of Webpack4 plugins

Example code for Html layered box-shadow effect

MySQL PXC builds a new node with only IST transmission (recommended)

Recommend

Example code for implementing the "plus sign" effect with CSS

Detailed explanation of Mysql transaction processing

MySQL 8.x msi version installation tutorial with pictures and text

How to create a Pod in Kubernetes

MySQL 8.0.24 version installation and configuration method graphic tutorial

Example code for converting http to https using nginx

CSS3 animation to achieve the effect of streamer button

Introduction to ApplicationHost.config (IIS storage configuration area file)

Solution for installing opencv 3.2.0 in Ubuntu 18.04

Intellij IDEA quick implementation of Docker image deployment method steps

How to redirect URL using nginx rewrite

Usage and performance optimization techniques of aggregate function count in MySQL

JavaScript to achieve fancy carousel effect

How to use crontab to add scheduled tasks in Linux

Introduction to using MySQL commands to create, delete, and query indexes