What is vue anti-shake?-Front-end Q&A-php.cn

What is vue anti-shake?

青灯夜游

Release： 2022-07-20 18:46:28

Original

2175 people have browsed it

In vue, anti-shake means to execute the callback n seconds after the event is triggered. If it is triggered again within these n seconds, the time will be restarted; that is to say: when an event continues to be triggered, The event processing function will only be executed once if the event is not triggered again within a certain time interval. If the event is triggered again before the set time interval arrives, the delay will be restarted.

What is vue anti-shake?

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

When it comes to the optimization of vue projects, anti-shake throttling really needs to be understood. Let’s talk about anti-shake.

Debounce

Execute the callback n seconds after the event is triggered. If it is triggered again within these n seconds, Then re-time;

Explanation: When an event is continuously triggered and no event is triggered again within a certain time interval, the event processing function will be executed once. If the event is triggered again before the set time interval arrives, event, the delay will start again.

Popular understanding means that we only need to click once during the click request or click load process, but due to the slow request, we click many times, resulting in multiple requests. Anti-shake is after clicking many times. will only be requested for the last time.

Case 1:

When the scroll event is continuously triggered, the handle function is not executed immediately. When the scroll event is not triggered within 1000 milliseconds, it will be triggered once with a delay. handle function.

function debounce(fn, wait) {
 let timeout = null
 return function() {
  if(timeout !== null) clearTimeout(timeout)   
  timeout = setTimeout(fn, wait);
 }
}
function handle() {  
 console.log(Math.random())
}
window.addEventListener(&#39;scroll&#39;, debounce(handle, 1000))

Copy after login

The second parameter of addEventListener is actually the return method in the debounce function, let timeout = null. This line of code will only be executed once when addEventListener triggers the event. Then every time When the scroll event is triggered, the last delayer will be cleared and a new delayer will be recorded. When the scroll event stops triggering, the last recorded delayer will not be cleared and can be delayed. This is the principle of the debounce function.

Case 2:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        输入内容：<input type="text"  @keyup="deb"/>
        <div> 输入次数：{{num}}</div>
    </div>
    <script>
        let time
        var app=new Vue({
            el:&#39;#app&#39;,
            data:{
                num:0,
            },
            methods:{
                deb: function () {
let that = this
if (time) {
clearTimeout(time)
}
time = setTimeout(function () {
                            that.num++
console.log(&#39;输入了&#39;+that.num+&#39;次&#39;)
time = undefined;
}, 2000)
}
            }
        })
    </script>
</body>
</html>

Copy after login

Rendering: (Enter text once and execute it after 2 seconds. If you input it multiple times, it will still be executed once. The number of input times will only increase by 1):

The globally defined time is undefind. During the continuous input process, the keyup event is triggered multiple times, and the timer will be re-rendered each time. Only when the input interval exceeds (or is equal to) the set time of 2 seconds, num will be executed.

What is vue anti-shake?

With keyboard modifiers: (.enter as an example)

    <div id="app">
        输入内容：<input type="text" class="input"  @keyup.enter="deb"/>
        <div> 输入次数：{{num}}</div>
    </div>

Copy after login

In this way, after pressing Enter continuously, only one input will be triggered. Each time you press It will only be triggered once when the carriage return interval is set to two seconds.

So, considering that the submit button will be clicked and touched continuously, anti-shake is necessary.

Of course, there are other solutions. For example, the project uses a control button method. Click Save. Before the request interface returns 200, the button is prohibited from being used, so there will be no repeated clicks.

【Recommended related video tutorials: vue video tutorial, Getting started with web front-end】

The above is the detailed content of What is vue anti-shake?. For more information, please follow other related articles on the PHP Chinese website!