Vue does a search and asks for it every time he presses the keyboard.

clipboard.png

A search similar to Wechat has no "search" button, just an input box. 

<input @keyup="load_list($event)">

now there is a problem:
enter "ABCD"
to send 4 requests to the background
A
B
C
D

so I added a timer and sent the request 1 second later:
enter "ABCD"
sent four requests to the background
ABCD

I"m going crazy. Is there a good solution?

Node.js html5 html css javascript
Mar.28,2021

you need anti-shake (debounce) function

function to shake https://www.lodashjs.com/docs. to learn about

A relatively simple and stable method: introduce lodash .
if you want to control the frequency of function execution after input, use the debounce module in lodash .
reference link

has nothing to do with vue. The keyup event you use is triggered every time you press the key to lift it. You can write a timer, no problem, but use setinterval,var aa = setinterval ();. Set an input time limit, enter within the time limit, clearInterval (aa), and then add setinterval.

input and then set a timer to control the request. If you listen to the keyboard input operation again, cancel the timer. If you do not have a request

then add an OK button at the back, or monitor the enter key, and then search for

with @ input event. Change minimum

write timer is completely achievable. Every time you enter, you have to clear the timer and then start a new timer when the time is up and when it will be triggered. Example: 

:let timer = null;
method:{
    load_list(){
        clearInterval(timer);
        timer = setInterval(()=>{
            Ajax();
        }, 1000)
    }
}

try one try.

  • recommend @ input event
  • first of all, you need to figure out the rule of your search (string length..) reach this rule before you request

Previous: The @ input event in version 2.4 of vue is different from that in version 2.5.

Next: In this configuration, can the ping package be handled by the ndo_start_xmit function of oai0?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu