Today, there are also very hard to earn cat food money

Although it is now possible to implement anti-shake and throttling functions globally by introducing LoDash, there are still some interview questions that require handwritten anti-shake functions and throttling functions. For those of you who don’t know lodash, check out this article

If there are mistakes or deficiencies in the article, please understand and help me to point out, thank you very much

Image stabilization

After each event is triggered, it always waits for a period of time to execute. If the event is triggered again within the waiting time, the waiting time will be recalculated (the event will only be executed once when triggering is stopped, and the last time will take effect).

According to the above text and diagram, look at the anti – shake function

function fun () {
	// A function that fires multiple times
}
Copy the code
let timer = null;
function debounce (fun,wait) {
	// The event is triggered. If there was a waiting event before, the timer is cleared and the event wait execution is restarted
	if (timer) {
  	clearTimeOut(timer);
  }
  timer = setTimeout(fun, wait);
}
Copy the code

Next we are going to need to encapsulate the function to become a public method in our project, because it is passed as a parameter to the function image stabilization function, not sure what will be used inside a function parameter of the incoming, parameter binding object is which, in order to be able to accurately using parameter, so we modify this point when the call

let timer = null;
function debounce (fun,wait) {
	// The event is triggered. If there was a waiting event before, the timer is cleared and the event wait execution is restarted
	if (timer) {
  	clearTimeOut(timer);
  }
  timer = setTimeout(function () {
  	fun.apply(this);
  }, wait);
}

/ / call
debounce(fun, 100);
Copy the code

We will find that fun, which we passed to the anti-shake function, will not be able to pass in the argument, which will require further modification

let timer = null;
function debounce (fun,wait) {
  return function () {
  	const argu = arguments;
  	// The event is triggered. If there was a waiting event before, the timer is cleared and the event wait execution is restarted
    if (timer) {
      clearTimeOut(timer);
    }
    timer = setTimeout(function () {
      fun.apply(this, argu); }, wait); }}/ / call
debounce(fun, 100)(argu1, argu2);
Copy the code

The throttle

After each event is triggered, a period of time is always waited for execution. If the event is triggered again within the waiting time (other events are waiting when the event is triggered), no processing is performed. If no other event is waiting when the event is triggered, the event is bound (the event is executed when the waiting time expires). If the event is triggered for multiple times, the event takes effect only once. The event takes effect for the first time.

Take a look at the throttling function based on the above text and diagram

let timer = null;
function throttle (fun,wait) {
	// The event is triggered. If there is a waiting event before, the event is not processed
	if (timer) {
  } else{event is triggered. If no event is waiting before, the event will wait and execute timer =setTimeout(function () { fun(); }, wait); }}Copy the code

It is the same as the anti-shake function above, but the internal execution time is different. We will encapsulate the throttling function

let timer = null;
function throttle (fun,wait) {
  return function () {
  	const argu = arguments;
    // The event is triggered. If there is a waiting event before, the event is not processed
    if (timer) {
    } else{event is triggered. If no event is waiting before, the event will wait and execute timer =setTimeout(function () { fun(); }, wait); }}}/ / call
throttle(fun, 100)(argu1, argu2);
Copy the code