This is the first day of my participation in the First Challenge 2022

👨💻 blog home page: author home page 👍 If you think the article is good, you can click to like it and follow us

Work scene

There is such a requirement, is we write a similar to baidu search such a function, we input a keyword, the following will automatically return to us with the keyword of such a requirement, how should we achieve it?

Look at the code

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta < span style>. Box {width: 100%; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } < / style > < / head > < body > < div class = "box" > < div > < h1 > baidu sou suo < / h1 > < input type = "text" id = "inputBox" > < / div > < / div > <script> var inputBox = document.getElementById('inputBox') inputBox.addEventListener('input', () => {console.log(' entered the content and sent the request '); }) </script> </body> </html>Copy the code

The browser looks like this

Think about a

We enter the field in the search box many times, each input will send a request, so very frequent requests, the server pressure is very large. This is highly undesirable, and we may just want to get the information we want.

I just want to know 123456, I don’t want to know what 1 is, what 12 is, etc.

So we set up a function to send the request only when the user has finished typing

Then we wrote the code like this

Var inputBox = document. GetElementById (' inputBox) function shake (fn) {fn} / / receiving a parameter inputBox. AddEventListener (' input ', Shake (() => {console.log(' entered the content and sent the request '); }))Copy the code

We passed that anonymous function as an argument to the Shake function, which is converted to firing this function every time we input it, which is a lot easier to understand than above.

Although it looks easy to understand, it always feels strange, because the second argument to addEventListener is supposed to be a function, but the value here is determined by shake, and this shake is a result that is returned, and if it returns something other than a function, then it’s very wrong, so we’ll rewrite it like this, Let him return a function

Var inputBox = document.getelementById ('inputBox') function shake(fn) {fn return function() { Console. log(' Shake this function executes '); Fn ()}} inputBox. AddEventListener (' input 'shake (() = > {the console. The log (' send a search box'); }))Copy the code

Then go to the page and have a look

But if we type multiple times and keep printing, then we can give a timer, tell it to wait and go back and see what happens.

Var inputBox = document.getelementById ('inputBox') function shake(fn) {return function() {setTimeout(() => {console.log('shake this function executes '); Fn ()}, 500).}} inputBox addEventListener (' input 'shake (() = > {the console. The log (' send a search box'); }))Copy the code

Then let’s go back to the browser console

Even though it’s delayed, it’s still executed multiple times, which means that no matter how many times we fire, we still end up executing the same number of times

Why is that?

It fires twice, but it’s delayed, so we want it to only return once, so we can think of, before entering, we destroy the last timer, only execute the last timer, and then the code is as follows

Var inputBox = document.getelementById ('inputBox') function shake(fn) {fn let timer = null; Return function() {if (timer) {clearTimeout(timer)} timer = setTimeout(() => {console.log('shake function executed '); Fn ()}, 500).}} inputBox addEventListener (' input 'shake (() = > {the console. The log (' send a search box'); }))Copy the code

In other words, I declare an empty timer, and then every time I execute it, I check if there is a timer, if there is one, I go to the clean timer step, if not, I go to the next step, so, let’s see how the browser returns

Even though I did it a bunch of times, hitting a bunch of ones, I only got one return

Therefore, the above is the important technical points to achieve anti – shake

🤞 author Xiao SAN is just graduated from the full stack engineer, wrote the technical article is basically in the process of learning notes sorted out, you can give little brother a little praise if you like after reading. 🎁 fan benefits: learning materials, resume templates are all click to receive