I am also preparing for the interview recently. The only obstacle I can’t overcome for myself is the algorithm and handwritten questions. I have prepared carefully, have you noticed the following details

1. If you

1.1 How to write anti-shake

What is anti-shake? The most common examples are form submit buttons and page resizing. Here I interrupt and post a graph of the coordinate properties of the Event object that I found, detailing a wave of — > portals

Let’s get back to business. Once in a while, when we hear it, we realize it’s a timer. Yeah, that’s what they say.

<button id="button"> </button> <script> const button = document.getelementbyid ('button') function debonce(fn,time){let  timer return function(){ clearTimeout(timer) timer = setTimeout(() => { fn.apply(this,arguments) Console. log(' test ',arguments)},time)}} Button.addeventlistener ('click',debonce(function(event){console.log(' I'm here ',event,this)},2000))event </script>Copy the code

1.2 Understand shake prevention

So we’re going to write a stabilization for a button, listen for its click event, write a debonce function that returns an anonymous function, and the second argument to DOMaddEventListener should be a function name that DOM will call for us when the click event happens, In addEventListener, our debonce function takes parentheses, so when the click event occurs, the anonymous function in debonce is actually executed. If I understand this correctly, it’s called Currization. By returning a function within a function, you can call it consecutively and get arguments consecutively.

By means of Corrification, we can take fun and time in anonymous functions and write a timer, execute fun in the timer, and at the same time, clean up the timer every time the timer starts. We pass 2 seconds, which guarantees that the shortest interval between fn function execution is 2 seconds. If you keep crazy, As long as the interval event time does not exceed two seconds, only one final execution is performed. , so the first call has no timer, what to clean up? So we define a time utility closure in addition to the anonymous function, which will not be cleared if the anonymous function uses it even after the debonce function has finished executing. This is the general understanding of anti – shake. Let me write some more details

1.3 Details of anti-shake

1.3.1 this

This, at the end of the day, the function that matters is fn, and we have to make sure that this in FN is normal. What is normal? I think three sentences can be summed up

  1. Who is calling,thisIt points to whoever, in a normal functionthisPoint to thewindowIn strict mode, yesundefined
  2. The constructor is usednewOperator in a functionthis, pointing to the newly generated object
  3. In the arrow functionthisIt’s the first one that the outer layer touchesthis

If the “this” in fn is not applied, it points to the window. Normally it points to the button, so we use apply to change the “this” in FN.

  • apply call bindIt’s all defined on a prototype that can change the functionthisPoint, the first parameter is what you want to point tothisWhere to point to? The arguments that follow are passed to the calling function, and some of the differences are the arguments that are passed,applyPut all the parameters that you want to pass into an array,call 和 bindHow do you pass it? Another difference is call itcall.applyThe latter function is understood to be executed,bindReturns a new function.
Fun1. Call (bb, 11, 22); Fun1. Apply (bb, [11, 22]); Fun1. Bind (bb, 11, 22) ()Copy the code

1.3.2 the arguments

Arguments is an array of classes, instanceof which you can see is not an object, but it has a length property, which can be retrieved by subscript. Arguments can be used to get arguments.

Function app(){console.log(arguments)} app(1,2,3,4)Copy the code

Also, like this, the auguments inside the arrow function are the first ones that the outer layer touches

Function app(){const fn = (a,b,c,d) => {console.log(' I am arguments object ',arguments)} function app(){const fn = (a,b,c,d) => {console.log(' I am arguments object ',arguments)} Fn (5,6,7,8)} app (1, 2, 3, 4, 5)Copy the code

So what is the function of this argument? So in the first example, when you click the button, because it’s listening, when it calls our function, it’s giving us the event object, but it’s giving us an anonymous function, so it’s using fn, so it’s using argument. Basically, to help us get the parameters to execute the function, I’m going to change the event listener to call myself, so you might get the idea

Debonce (function(params){console.log(' I'm here ',params),console.log(' I'm this',this)},2000)(' Hello ')Copy the code

How’s that？ It should be thin enough, hahaha

2. The throttle

Throttling, to be honest, is a lot like anti-shake. Let’s look at a real case, listening to the pulley roll

<div style="background-color: red; width:30px; Height: 2000 px "> < / div > < script > const fn = function () {the console. The log (' I trigger execution ')} the document. The addEventListener (' scroll ', fn) </script>Copy the code

I don’t want it to do this so many times, I want it to only do it once in 3 seconds, so how do I write that? I see two ways, one is using a timestamp, and one is still using a timer.

<div style="background-color: red; width:30px; Height :2000px"></div> <script> const fn = function(event){console.log(' I trigger execution ',event)} const throttle = function(fn,wait){ let time1 = 0 return function(){ let time2 = new Date() if(time2-time1 >wait){ fn.apply(this,arguments) time1 = time2 } } } document.addEventListener('scroll',throttle(fn,1000)) </script>Copy the code

I feel, from the purpose, I do not feel there is a vast difference between stabilization and throttling, but from the code, if not more than time interval, will clean up timer, so the execution is a function of the latest, the throttle, no more than time interval, it does not perform, to wait for a function to perform before, to perform the next.

Behind will also write other handwritten questions, write this kind of blog is the biggest benefit of their own, may be for the novice help will be bigger, for the big guys, a little play house, forgive me, food for thought, welcome to eat!