JavaScript deshaking and throttling examples

JavaScript deshaking and throttling examples

Anti-shake: only execute the last task within a certain period of time;

Throttling: Execute only once within a certain period of time;

Stabilization

<button id="debounce">Click me to debounce! </button>
 
$('#debounce').on('click', debounce());
 
function debounce() {
    let timer;
    // closure return function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
            // Operations that require anti-shake...
            console.log("Anti-shake successful!");
        }, 500);
    }
} 

insert image description here

Throttling:

<button id="throttle">Click me to throttle! </button>
 
$('#throttle').on('click', throttle());
 
function throttle(fn) {
    let flag = true;
    // closure return function () {
        if (!flag) {
            return;
        }
        flag = false;
        setTimeout(() => {
            console.log("Throttling successful!");
            flag = true;
        }, 1000);
    };
} 

insert image description here

This is the end of this article about JavaScript anti-shake and throttling cases. For more relevant JavaScript anti-shake and throttling 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:
  • A brief discussion on JavaScript throttling and anti-shake
  • Difference and implementation of JavaScript anti-shake and throttling
  • JavaScript anti-shake and throttling detailed explanation
  • JavaScript anti-shake and throttling explained
  • Implementation and usage scenarios of JS anti-shake throttling function
  • What is JavaScript anti-shake and throttling

<<:  Summary of MySQL development standards and usage skills

>>:  Automatically install the Linux system based on cobbler

Recommend

Summary of how JS operates on pages inside and outside Iframe

Table of contents Get the content of the iframe o...

Example analysis of the usage of the new json field type in mysql5.7

This article uses an example to illustrate the us...

Ubuntu 20.04 turns on hidden recording noise reduction function (recommended)

Recently, when using kazam in Ubuntu 20.04 for re...

Implementing file content deduplication and intersection and difference in Linux

1. Data Deduplication In daily work, there may be...

A permanent solution to MYSQL's inability to recognize Chinese

In most cases, MySQL does not support Chinese whe...

The whole process of developing a Google plug-in with vue+element

Simple function: Click the plug-in icon in the up...

JS implements the sample code of decimal conversion to hexadecimal

Preface When we write code, we occasionally encou...

Layui implements the login interface verification code

This article example shares the specific code of ...

CentOS 7 configuration Tomcat9+MySQL solution

Configure Tomcat First install Tomcat Installing ...

Implementation example of Vue+Element+Springboot image upload

Recently, I happened to be in touch with the vue+...

How to display web pages properly in various resolutions and browsers

The key codes are as follows: Copy code The code i...

How to use partitioning to optimize MySQL data processing for billions of data

When MySQL queries tens of millions of data, most...

Inspiring Design Examples of Glossy and Shiny Website Design

This collection showcases a number of outstanding ...

How to deploy Node.js with Docker

Preface Node will be used as the middle layer in ...