Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use the Spirit anti-shake function underscore and throttle function lodash. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

The difference between anti-shake function and throttle function

Anti-shake function: an event is triggered and executed if no second event is triggered within a specified period of time. In other words, if events continue to be triggered, the specified execution time will be continuously delayed.

Throttling function: it means that no matter how many events you trigger within a specified period of time, you will only execute them once. Let me give you an example from life, which is easy to understand. Arena of Valor this game may be played by many people, each hero has his own skill, after we click on it, the skill will enter the cooldown, no matter how fast we click, this ability can only be triggered once before the cooldown is good (when we click for the first time)

Realization of anti-shake function

I will realize the four functions of the anti-shake function. I hope you can follow step by step, step by step. I believe you will gain something.

Basic realization

We can think about how to implement an event in JS if it is executed after a specified time.

Okay, time's up.

Timer, my friends must know that.

The event is triggered and executed after a certain period of time, which can be solved by using a timer.

So there is another question: after the event is triggered, then the event is triggered, how to make him postpone the execution?

If it is triggered again within a specified period of time, we would just delete the timer we created earlier, right?

Does this solve our problem? OK, let's write down the code now, in case you don't understand.

Function debounce (fn, delay) {/ / define a timer let timer = null; / / clear the last timer const _ debounce = function () {if (timer) clearTimeout (timer) each time it is triggered; / / execute timer = setTimeout (() = > {fn ();}, delay)} return _ debounce;} according to the incoming delay

This code is relatively easy, I believe my friends must understand it.

But there is still something wrong with this code. Let's call the anti-shake function of underscore in the third-party library.

Cancel const btn = document.querySelector ("button"); const input = document.querySelector ("input"); let count = 0; function test (event) {/ / pay attention to the this and event console.log here (`send ${+ + count} network request`, this, event); return "I am returning the result" } input.oninput = _ .debounce (test, 2000)

Let's open the browser to debug and take a look at the output

You can see that there is no problem with this and Event output.

Let's take a look at our output.

You will find that this is window and Event is undefined.

Why is that?

This is because the code we wrote did not bind the this, nor did it receive the event of the DOM element

Fn () executes directly when the this points directly to window.

Function debounce (fn, delay) {let timer = null; / / use remaining parameters to receive all parameters DOM when calling this function, we can receive event const _ debounce = function (. Args) {if (timer) clearTimeout (timer) Timer = setTimeout (() = > {/ / Note that we use apply for a changeover, binding to the DOM element that executes this: fn.apply (this,args);}, delay)} return _ debounce;}

At this point, there is no problem with the basic implementation of our anti-shake function.

It's nice to see the friends here.

This basic implementation is enough for the interview, and then we have some additional functions to achieve. We can continue to read what we want to see, and we can collect what we don't want to see now and look at it later.

Execute immediately

In some application scenarios, such as searching, when you type the first character, he will associate a series of characters. He will not wait for a period of time to execute, but will execute immediately. Let's implement this function next.

First of all, execute this function immediately, and we can give it to the user to decide whether to use it or not.

Debounce (fn,delay,immediate=false)

We pass it as a parameter, which is off by default

Okay, now let's take a look at the code implementation

Function debounce (fn, delay, immediate = false) {let timer = null; / / Code specification We'd better not modify the parameters passed in by the user / / so we declare a variable below to control let isInvoke = false; const _ debounce = function (. Args) {if (timer) clearTimeout (timer) / / if immdiate inverts true / / isInvoke to true if (immediate & &! isInvoke) {/ / will execute fn.apply (this, args) immediately; / / set isInvoke to true at the same time to prevent immediate execution of isInvoke = true when it is triggered again. } else {/ / immediately after the end of the first trigger / / isInvoke will be limited to the end of input in the timer before refreshing isInvoke timer = setTimeout (() = > {/ / the remaining operations will wait for the timer to end fn.apply (this, args) within a specified time / / refresh inInvoke isInvoke = false;}, delay)}} return _ debounce;} at the same time

OK, this piece is relatively simple, compared to you should understand, if there is anything you do not understand, welcome to leave a message in the comment area, I will answer when I see it.

Well, if we start the next chapter, if the user does not want him to request after typing, then we need a cancel function. Yes, the next step is to implement the cancel function.

Cancel the function

How can we cancel the request in the remaining time?

Yeah, that's right! Empty the timer

We just need to add a static method to the function we return to provide the user with a cancel function.

Let's take a look at the code implementation

/ / add a static method to the returned function to cancel the request _ debounce.cancel = function () {if (timer) clearTimeout (timer);}

Isn't it easy? It is as simple as that to cancel the function with one line of code.

Okay, we have one last feature to implement, and that is, if the developer wants to get the result after the request, can our current anti-shake function do it? I don't think so, right?

So next, let's implement the last function to get the returned result.

Return the result

Let's think about a question. Where is the return result?

The user passes a function to us and returns a new function.

Then the returned result must be on the function passed to us by the user.

So the key is to pass the return result of the user's function.

Now we have two plans here.

Callback function

Promise

Let's first look at the version of the callback function.

/ / callback function version function debounce (fn, delay, immediate = false, resultCallBack) {let timer = null; let isInvoke = false; let result = null; const _ debounce = function (. Args) {if (timer) clearTimeout (timer); if (immediate & &! isInvoke) {/ / receive result result = fn.apply (this, args); resultCallBack (result) IsInvoke = true;} else {timer = setTimeout (() = > {/ / receive result result = fn.apply (this, args); resultCallBack (result); isInvoke = false;}, delay)}} _ debounce.cancel = function () {if (timer) clearTimeout (timer) Timer = null; isInvoke = false;} return _ debounce;}

Practical application

Const _ debounce = () = > {debounce (test, 1000) (). Then (res = > {console.log (res);})} input.oninput = _ debounce

Is the callback function relatively simple? Let's take a look at the Promise version, we should pay attention to some holes in practical application.

Function debounce (fn, delay, immediate = false) {let timer = null; let isInvoke = false; let result = null; const _ debounce = function (... args) {/ / return a Promsie object directly in the returned function / / pass the result into resolve return new Promise ((resolve, rejected) = > {if (timer) clearTimeout (timer)) If (immediate & &! isInvoke) {result = fn.apply (this, args); resolve (result) isInvoke = true;} else {timer = setTimeout (() = > {result = fn.apply (this, args); resolve (result) IsInvoke = false;}, delay)}})} _ debounce.cancel = function () {if (timer) clearTimeout (timer); timer = null; isInvoke = false;} return _ debounce;}

Actual call

Const _ debounce = function (... args) {debounce (test, 1000) .apply (this,args) .then (res = > {console.log (res);})}; input.oninput = _ debounce

Notice that we encapsulated the original function with another layer, because only in this way can we get the result of promise.

At the same time, this and event will not have a problem.

It's great to see the kids here. I'm sure you'll have no problem with the anti-shake function. We'll start to explain how to implement the throttling function later.

Realization of throttling function

Throttling function is also gradually realized from several aspects, with everyone unraveling the veil of throttling function step by step.

Basic realization

You can think about how to realize the throttling function.

Within a period of time, only one operation will be triggered, and subsequent operations will not be triggered.

We can get the current timestamp to calculate.

Let's talk about it directly through the code. It's easier to talk about it.

Function throttle (fn, interval) {let lastTime = 0; const _ throttle = function () {/ / first get the current time const nowTime = new Date (). GetTime (); / / the time interval passed in uses the current time minus the last triggered time / / to get the latest remaining time const reamainTime = interval-(nowTime-lastTime); if (reamainTime)

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.