Web project development JS function anti-shake and throttling sample code

Web project development JS function anti-shake and throttling sample code

Stabilization

Classic application common: accordion effect

Introduction

Website without anti-shake:

insert image description here

Websites with anti-shake:

Please add a description of the image

Anti-shake scene 1 (mouse move in)

Jitter: The user does not intend to trigger this interaction, but the interaction event is accidentally triggered due to accidental mouse jitter.
Example: I want to see the fifth picture. I don't want to see 2 3 4 pictures. But when the mouse slid from the first picture to the fifth picture, it accidentally landed on 2 3 4. False trigger.

Function anti-shake: If a user triggers an event multiple times in a row, only the last one will be executed.

Solution principle: Turn on the timer. If the event is triggered multiple times within the interval, clear the previous timer each time.

Example and solution code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Animation-Case Study "Accordion"</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
        width: 2400px;
      }
      #box {
        width: 1200px;
        height: 400px;
        border: 1px solid red;
        margin: 100px auto;
        overflow: hidden;
      }
      #box li {
        width: 100px;
        height: 400px;
        float: left;
        transition: all 0.5s ease-out;
      }
      #box li.over {
        width: 800px;
      }
    </style>
  </head>

  <body>
    <div id="box">
      <ul>
        <li v-for="(item,index) in list" :class="{over:overIndex == index}" @mouseenter="doEnter(index)">
            <img :src="item" alt="">
        </li>
      </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
      let app = new Vue({
          el:'#box',
          data:{
              overIndex:0,
              list:[
                  './images/collapse/1.jpg',
                  './images/collapse/2.jpg',
                  './images/collapse/3.jpg',
                  './images/collapse/4.jpg',
                  './images/collapse/5.jpg',
              ],
              timeID:null
          },
          methods: {
              doEnter(index){
                  /* Enable anti-shake*/
                  //1.1 Clear the last timer first, and use this time as the reference clearTimeout(this.timeID)
                  //1.2 Start the timer (anti-shake interval)
                  this.timeID = setTimeout(()=>{
                    this.overIndex = index;
                  },500)
              }
          },
      })
    </script>
  </body>
</html>

Anti-shake scene 2 (keyboard keys)

Classic application scenario: search for associated words
-Under development, the backend of this function will use the middleware "OpenSearch" or "Elasticsearch", and the backend logic processing will be very efficient and fast.
-This is just based on the front-end perspective, optimizing from the perspective of reducing http requests

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="Please enter the search content">
    <script>
        let timeID = null;
        document.querySelector('input').oninput = function(){
            /* Function anti-shake */
            //(1) Clear the previous timer clearTimeout(timeID) first
            //(2) Enable the anti-shake timer timeID = setTimeout(() => {
                console.log( this.value );
            }, 500);
        }
    </script>
</body>
</html>

Function throttling

Concept: Solve performance problems caused by high-frequency events; High-frequency events: In the page, some events are triggered very frequently.
For example: mouse movement, scroll wheel events.

Solution: If a user triggers an event multiple times in a row, it will only be triggered once within a specified time.

Example and solution code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            height: 3000px;
        }
    </style>
</head>
<body>
    <script>
        let lastTime = null;
        
        let i = 1;
        window.onmousemove = function(){
            /* Function throttling */
            //(1) Determine the time interval between two trigger events let time = Date.now()
            if( time - lastTime >= 500 ){
                console.log('Number of mouse moves: ' + i++);
                //(2) This trigger time is used as the next reference interval lastTime = time
            }
        }
        // let j = 1;
        // window.onscroll = function(){
        // //(1) Determine the time interval between two triggering events// let time = Date.now()
        // if( time - lastTime >= 500 ){
        // console.log('Number of mouse scrolls: ' + j++);
        // //(2) This trigger time is used as the reference interval for the next time // lastTime = time
        // }   
        // }
    </script>
</body>
</html>

The above is the details of the sample code for JS function anti-shake and throttling in web project development. For more information about JS function anti-shake and throttling in web projects, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Analysis of JavaScript's anti-shake throttling function
  • Implementation and usage scenarios of JS anti-shake throttling function
  • How to understand JS function anti-shake and function throttling
  • A brief discussion on JavaScript throttling and anti-shake functions
  • A brief analysis of JavaScript function anti-shake and throttling
  • Detailed explanation of anti-shake and throttling of functions in JavaScript

<<:  MySQL merges multiple rows of data based on the group_concat() function

>>:  Implementation of Nginx configuration and access to local static resources in Mac environment

Recommend

A brief talk about JavaScript Sandbox

Preface: Speaking of sandboxes, our minds may ref...

mysql: [ERROR] unknown option '--skip-grant-tables'

MySQL database reports ERROR 1045 (28000): Access...

Nginx reverse proxy configuration removes prefix

When using nginx as a reverse proxy, you can simp...

Discuss the development trend of Baidu Encyclopedia UI

<br />The official version of Baidu Encyclop...

Analysis of the principles of Mysql dirty page flush and shrinking table space

mysql dirty pages Due to the WAL mechanism, when ...

Detailed explanation of MySQL limit usage and performance analysis of paging query statements

Limit usage When we use query statements, we ofte...

How to install Django in a virtual environment under Ubuntu

Perform the following operations in the Ubuntu co...

Implementation of multiple instances of tomcat on a single machine

1. Introduction First of all, we need to answer a...

Configure nginx to redirect to the system maintenance page

Last weekend, a brother project was preparing to ...

Solution to the problem that MySQL service cannot be stopped or deleted under Windows

I installed MySQL on Windows by unzipping the com...

MySQL scheduled backup solution (using Linux crontab)

Preface Although some love in this world has a pr...

Answer the caching principle of keep-alive components from the perspective of source code

Today, let’s get straight to the point and talk a...

Detailed explanation of mysql backup and recovery

Preface: The previous articles introduced the usa...

Teach you step by step to develop a brick-breaking game with vue3

Preface I wrote a few examples using vue3, and I ...

Install Linux using VMware virtual machine (CentOS7 image)

1. VMware download and install Link: https://www....