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

HTML background color gradient achieved through CSS

Effect screenshots: Implementation code: Copy code...

Implementation of CSS border length control function

In the past, when I needed the border length to b...

100-1% of the content on the website is navigation

Website, (100-1)% of the content is navigation 1....

Detailed explanation of table return and index coverage examples in MySQL

Table of contents Index Type Index structure Nonc...

CSS flex several multi-column layout

Basic three-column layout .container{ display: fl...

Delegating Privileges in Linux Using Sudo

Introduction to sudo authority delegation su swit...

Implementation of CSS dynamic height transition animation effect

This question originated from a message on Nugget...

XHTML Basic 1.1, a mobile web markup language recommended by W3C

W3C recently released two standards, namely "...

MySQL 8.0.21 installation and configuration method graphic tutorial

Record the installation and configuration method ...

Example of how to check the capacity of MySQL database table

This article introduces the command statements fo...

WeChat applet custom tabBar step record

Table of contents 1. Introduction 2. Customize ta...

Research on the value of position attribute in CSS (summary)

The CSS position attribute specifies the element&...

Dockerfile implementation code when starting two processes in a docker container

I want to make a docker for cron scheduled tasks ...

Installation process of zabbix-agent on Kylin V10

1. Download the installation package Download add...