Table of Contents

1. What is anti-shake and throttling?

1. Anti-shake - debounce

Home

Web Front-end

JS Tutorial

JS simple implementation of anti-shake - debounce and throttling - throttle

php是最好的语言

Aug 02, 2018 pm 01:42 PM

javascript

1. What is anti-shake and throttling?

Ps: For example, in the search box, the user uses the change event to call the search when typing. If the user If you search every time you enter, how much server resources will be consumed? Even if your server resources are very powerful, you don't want to do this.

1. Anti-shake - debounce

One solution is to search for ## every time the user stops typing and the delay exceeds 500ms #String, this is anti-shake.

Principle: Combine several function calls into one, and be called only once after a given time has passed.
Code implementation:

function debounce(fn, delay) {
  // 维护一个 timer，用来记录当前执行函数状态
  let timer = null;

  return function() {
    // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
    let context = this;
    let args = arguments;
    // 清理掉正在执行的函数，并重新执行
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  }
}
let flag = 0; // 记录当前函数调用次数
// 当用户滚动时被调用的函数
function foo() {
  flag++;
  console.log(&#39;Number of calls: %d&#39;, flag);
}

// 在 debounce 中包装我们的函数，过 2 秒触发一次
document.body.addEventListener(&#39;scroll&#39;, debounce(foo, 2000));

Copy after login

debounce After the function is encapsulated, return to the internal Function
Every time an event is triggered, the current
timer will be cleared and the timeout will be reset and called. This will cause each high-frequency event to cancel the previous timeout call, causing the event handler to not be triggered
Only when the high-frequency event stops, the timeout call triggered by the last event can Execute
# after
delay

time 2. Throttle - throttle

Another solution than

antishake Be more relaxed. At this time, we don’t want the user to input blindly, but give the user some search prompts, so the limit is to query the String every time 500ms. This is throttling.

Principle: No matter how frequently the event is triggered, the throttling function will ensure that the real event processing function will be executed once within the specified time.
There are two code implementations, one is timestamp and the other is timer
1) Timestamp implementation:

function throttle(func, delay){
  let prev = Date.now();
  return function(){
    const context = this;
    const args    = arguments;
    const now     = Date.now();
    if(now - prev >= delay){
      func.apply(context, args);
      prev = Date.now();
    }
  }
}

Copy after login

When a high-frequency event is triggered, it should be executed immediately for the first time (if the interval between the event-binding function and the actual triggering event is greater than

delay), and then no matter how frequently the event is triggered, the same It will be executed every delay seconds. When the last event is triggered, the event will no longer be executed.

2) Timer implementation:

When an event is triggered, we set a timer. When the event is triggered again, if the timer exists, it will not be executed; until
delay After seconds, the timer executes the execution function and clears the timer so that the next timer can be set.

fucntion throttle(func, delay){
  let timer = null;

  return funtion(){
    let context = this;
    let args    = arguments;
    if(!timer){
      timer = setTimeout(function(){
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  }
}

Copy after login

When the event is triggered for the first time, the function will definitely not be executed immediately, but will be executed after

delay seconds. After that, events are triggered continuously and will be executed every
delay seconds. When the last stop is triggered, the function may be executed again due to the
delay delay of the timer.

3) Combined use of timestamps and timers, the throttling function will be executed immediately when an event is triggered, and the throttling function

function throttle(func, delay){
  let timer = null;
  let startTime = Date.now();

  return function(){
    let curTime = Date.now();
    let remaining = delay - (curTime - startTime);
    const context = this;
    const args = arguments;

    clearTimeout(timer);
    if(remaining <= 0){
      func.apply(context,args);
      startTime = Date.now();
    }else{
      timer = setTimeout(func, remaining);
    }
  }
}

Copy after login

needs to be executed in each

delayThe function will definitely be executed once in time, so the start time, current time and delay are used inside the throttling function to calculate remaining, when remaining <= 0 indicates that it is time to execute the function. If the time has not yet arrived, set it to trigger after the remaining time. Of course, if an event occurs again during remaining, the current timer will be canceled and a remaining will be recalculated to determine the current status.

Detailed explanation of throttling and anti-shake debounce of javascript function

Detailed explanation of throttling and anti-shake of javascript function

The above is the detailed content of JS simple implementation of anti-shake - debounce and throttling - throttle. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

4 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

4 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

1 months ago By DDD

Atomfall guide: item locations, quest guides, and tips

1 months ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7707

Java Tutorial

1640

CakePHP Tutorial

1394

Laravel Tutorial

1288

PHP Tutorial

1232

Related knowledge

How to implement an online speech recognition system using WebSocket and JavaScript Dec 17, 2023 pm 02:54 PM

How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

How to use JavaScript and WebSocket to implement a real-time online ordering system Dec 17, 2023 pm 12:09 PM

Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order

How to implement an online reservation system using WebSocket and JavaScript Dec 17, 2023 am 09:39 AM

How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.

JavaScript and WebSocket: Building an efficient real-time weather forecasting system Dec 17, 2023 pm 05:13 PM

JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We

Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

How to use insertBefore in javascript Nov 24, 2023 am 11:56 AM

Usage: In JavaScript, the insertBefore() method is used to insert a new node in the DOM tree. This method requires two parameters: the new node to be inserted and the reference node (that is, the node where the new node will be inserted).

JavaScript and WebSocket: Building an efficient real-time image processing system Dec 17, 2023 am 08:41 AM

JavaScript is a programming language widely used in web development, while WebSocket is a network protocol used for real-time communication. Combining the powerful functions of the two, we can create an efficient real-time image processing system. This article will introduce how to implement this system using JavaScript and WebSocket, and provide specific code examples. First, we need to clarify the requirements and goals of the real-time image processing system. Suppose we have a camera device that can collect real-time image data

See all articles