Together, we get better every day. It all adds up, and one day it will.

(a) can not say the JS key knowledge ~ immediately execute the function

(two) can not say the JS key knowledge ~ throttling and anti shake (test little sister topic)

(3) can not say the JS key knowledge ~ recursion and tail recursion (test little sister topic)

(4) can not say the JS key knowledge ~ closure (test little sister topic)

(5) javaScript key knowledge ~~~ singleton pattern (test little sister topic)

Today is another normal day. I have a rest at my station after lunch and dream about my life plan after winning 10 million yuan in the lottery. Suddenly a sweet smell came up. This is none other than our little test belle. When I opened my hazy eyes, I felt a murderous smell in the fragrance, as I had expected. She came straight at me and beat me awake. “Wake up, the real-time search function I just made has occasionally stalled!!” “She accused. But I see her delicate little expression, or against her will to forgive her. Commit sin ！！！！！

After years of professionalism, I got straight to the point. Open the Chrome debugger tool to debug this puzzling bug. As expected, when entering the content in the search bar, each letter will be requested once. There are many network requests printed in the network. This kind of high frequency request is the main cause of the lag, after all, browser performance is limited, we can not tolerate such chutziness. Let’s discuss how to optimize this scenario to take the edge off the test sister.

Cut to the chase, the goal now is to reduce the number of requests and save traffic. Go ahead, fake it. Bring out my trump card — debounce and throttle.

First, let’s get to know them:

1. Debounce: For events that are triggered consecutionally within a short period of time (as in the above scenario: consecutive requests for the same interface), debounce means that the event handler is executed only once within a certain period of time (say 200 ms). For example: I type 100 letters in a row, type the last letter, wait 200 milliseconds, and execute the request interface.

2. Throttling: For events that are triggered continuously within a short period of time (in the scenario above: requests to the same interface continuously), throttling is performed every 300 milliseconds within a certain period of time. For example, I type 100 letters in a row, requesting an interface every 300 milliseconds. This means that after 100 letters have been entered, the interface will be requested multiple times.

Ii. Solutions:

1. For the above scenarios, we first adopt the anti-shake function.

function debounce(fn, delay = 200) { if (typeof fn ! == 'function') {throw new TypeError('fn is not a function'); } let lastFun = null; return function(... args) { if (lastFun) { clearTimeout(lastFun); } lastFun = setTimeout(fn, delay); }}Copy the code

After using the stabilization function, it was found that the request would not be triggered until 200 milliseconds after the input was stopped. Seems to solve the problem of lag and waste of resources.

2. Use throttling functions

After careful consideration, the input event of our search box needs to support real-time search. So the solution of the anti-shake function is still a little bit less interesting. Let’s experiment with throttling.

function throttle(fn,delay){ let jieke = true; return function(){ if(! jieke){ return false; } jieke = false; setTimeOut(()=>{ fn(); jieke = true; },delay); }} throttle(()=>{console.log(' I love you, test little girl ')},300);Copy the code

After testing, the throttling function is in line with our implementation scenario.

See the test results. Test little sister, show unprecedented surprise, face also fully gave a slight ruddy. Then she whispered, “Meet me downstairs at the coffee shop after work.”

To be continued……..

Everybody see officer, know why test little elder sister, suddenly face take peach blossom, pink inside thoroughly red? Is our program beautiful, or because……. Welcome to leave a message, a lot of guidance criticism.

Qinyuan Spring · Snow

North scenery, thousands of miles of ice, thousands of miles of snow floating.

Look inside and outside the Great Wall, but I recklessly; Up and down the river flows a torrent.

Mountain dance silver snake, the original chi wax elephant, and heaven try higher.

Must be a sunny day, see red wrapped in plain, especially enchanting.

The land is so charming that countless heroes bow in admiration.

Cherish qin Emperor han Wu, slightly lost literary talent; Tang Zong song Zu, slightly less coquettish.

Genghis Khan, the emperor of heaven, only knew how to shoot eagles with a bow.

All past, the number of romantic figures, but also look at today.