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

A brief discussion on the implementation principle of Webpack4 plugins

Table of contents Preface know Practice makes per...

Example of how nginx implements dynamic and static separation

Table of contents Deploy nginx on server1 Deploy ...

Detailed steps to install Anaconda on Linux (Ubuntu 18.04)

Anaconda is the most popular python data science ...

JS gets the position of the nth occurrence of a specified string in a string

Learn about similar methods for getting character...

Use CSS to achieve circular wave effect

I often see some circular wave graphics on mobile...

Creating Responsive Emails with Vue.js and MJML

MJML is a modern email tool that enables develope...

A brief talk about the diff algorithm in Vue

Table of contents Overview Virtual Dom principle ...

AsyncHooks asynchronous life cycle in Node8

Async Hooks is a new feature of Node8. It provide...

Tips for turning pixels into comprehensive brand experiences

Editor: This article discusses the role that inte...

Summary of Common Commands for Getting Started with MySQL Database Basics

This article uses examples to describe the common...

View the number of files in each subfolder of a specified folder in Linux

count script #!/bin/sh numOfArgs=$# if [ $numOfAr...

Implementation of Jenkins+Docker continuous integration

Table of contents 1. Introduction to Jenkins 2. I...