Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to achieve debounce anti-shaking of lodash in vue+element ui framework". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The reason for this: I use the remote search box in the element ui framework, the component has been anti-shake when selecting, query is a string for a period of time. However, in multiple selection, there is no anti-shaking, but each input character has to send a request to the background, so it must be anti-shaking. It is officially recommended to use lodash's debounce.

In solving this problem, I have mainly encountered the following:

I first install lodash with npm in the project, install it globally, and then install it to the project

Npm install-g lodashnpm install-- save lodash

After installation, I introduced lodash into the anti-shake component I want to use.

Var lodash = require ('lodash')

Here are the detours.

After Baidu, I found that debounce is always used with keyup, so I bound the keyup event in my search box, but the bound event did not take effect. I learned from the query that input is encapsulated in element ui, so you need to add .native to the end to overwrite the original event.

After the keyup successfully bound the event, I found that the result was not what I wanted, because the parameter in the keyup binding event was a character I typed on the keyboard, but what I wanted was the entire string after input. So I started using watch to monitor this.AddCandidateFrom.follow_hr again.

After listening to this.AddCandidateFrom.follow_hr, I found that it was not useful, because it represented the string already selected in the multibox, and the string being entered would not be recorded, so I fell back to the method of using the remote search itself to bind remote-methods

After binding the remote-method method, I use the traditional method to define the bound method (), instead of using the abbreviated es6 method, because using lodash.debounce returns a function. If there is a parameter, add it to the function empty parameter list

GetRemoteFollow: lodash.debounce (function () {console.log ('111');}, 300), "how to implement debounce anti-shake of lodash in vue+element ui framework" is introduced here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.