1. Understand anti-shake and throttling functions

The concept of anti – shake and throttling did not first appear in software engineering, anti – shake is in electronic components, throttling is in fluid flow.

  • Javascript, on the other hand, is event-driven, and a large number of operations trigger events that are queued for processing
  • For some frequent event processing will cause performance loss, we can limit the occurrence of frequent events through shaking prevention and throttling

1.1. Know the debounce function

Scene: In the actual development, often encounter click a button to request network interface, then the user if because hand shake a few more buttons, will appear in a short period of time many times request interface, which can cause performance consumption, actually we really only need to monitor the last button, but we don’t know which one would be the last time, You need to do a delay trigger, like if you don’t click again within 300 milliseconds of this click, it’s the last one. This is the scenario in which the anti-shake function is used

Summarize the logic of anti – shake function

  • When an event is triggered, the corresponding function does not fire immediately, but waits for a certain amount of time.
  • When event – intensive firing occurs, function firing is frequently delayed.
  • The actual response function only happens when no event is triggered after a period of time

1.2 Understanding the throttling function

Scenario: During the development, we will need to do some logic to listen to the mouse movement, such as sending network requests, but we know that document. onMousemove listens to the mouse movement events with a high trigger frequency, we want to trigger at a certain frequency, such as once every 3 seconds. No matter how many times document. onMousemove listens in the middle, it only executes once. This is where the throttling function is used

Summarize the logic of the throttling function

  • When an event is emitted, the event response function is executed.
  • If the event is triggered frequently, the throttling function is executed at a certain frequency;
  • No matter how many times the event is triggered in between, the frequency of executing the function is always fixed;

2. Realize the anti-shake function

2.1 Basically achieve V-1

const debounceElement = document.getElementById("debounce");

const handleClick = function (e) {
  console.log("One click");
};

// debounce function
function debounce(fn, delay) {
  // Set a timer object to save the last timer
  let timer = null
  // The function that is actually executed
  function _debounce() {
    // Cancel the last timer
    if (timer) {
      clearTimeout(timer);
    }
    // Delay execution
    timer = setTimeout(() = > {
      fn()
    }, delay);
  }
  return _debounce;
}

debounceElement.onclick = debounce(handleClick, 300);

Copy the code

2.2 this- Parameter V-2

The handleClick function above has two problems. One is that this points to a Window, but it should point to debounceElement, and the other is that it does not pass arguments.

Optimization:

const debounceElement = document.getElementById("debounce");

const handleClick = function (e) {
  console.log("One click", e, this);
};

function debounce(fn, delay) {
  let timer = null;
  function _debounce(. args) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() = > {
      fn.apply(this, args) // Change this to refer to the pass argument
    }, delay);
  }
  return _debounce;
}

debounceElement.onclick = debounce(handleClick, 300);

Copy the code

2.3 Optional Whether to perform V-3 immediately

Sometimes we want to execute the button the first time we click it. How do we do that?

Optimization:

const debounceElement = document.getElementById("debounce");

const handleClick = function (e) {
  console.log("One click", e, this);
};

// Add an immediate parameter to select whether to call immediately
function debounce(fn, delay, immediate = false) {
  let timer = null;
  let isInvoke = false; // Whether it has been called
  function _debounce(. args) {
    if (timer) {
      clearTimeout(timer);
    }

    // Execute immediately if it is the first call
    if(immediate && ! isInvoke) { fn.apply(this.args);
      isInvoke = true;
    } else {
      // Execute isInvoke after resetting if the first call is not delayed
      timer = setTimeout(() = > {
        fn.apply(this, args);
        isInvoke = false; }, delay); }}return _debounce;
}

debounceElement.onclick = debounce(handleClick, 300.true);

Copy the code

2.4 Canceling Function V-4

Sometimes we have a very long delay, so what do we do when we want to cancel the event that the button was clicked before?

Optimization:

const debounceElement = document.getElementById("debounce");
const cancelElemetnt = document.getElementById("cancel");

const handleClick = function (e) {
  console.log("One click", e, this);
};

function debounce(fn, delay, immediate = false) {
  let timer = null;
  let isInvoke = false; 
  function _debounce(. args) {
    if (timer) {
      clearTimeout(timer);
    }

    if(immediate && ! isInvoke) { fn.apply(this.args);
      isInvoke = true;
    } else {
      timer = setTimeout(() = > {
        fn.apply(this, args);
        isInvoke = false; }, delay); }}// Add a cancel method to _debounce to cancel the timer
  _debounce.cancel = function () {
    clearTimeout(timer);
    timer = null;
  };
  return _debounce;
}

const debonceClick = debounce(handleClick, 5000.false);
debounceElement.onclick = debonceClick;
cancelElemetnt.onclick = function () {
  console.log("Cancelled the event.");
  debonceClick.cancel();
};

Copy the code

2.5 Returned Value V-5 (Final version)

One last question, how should we receive a return value from handleClick

Optimization: Callback with Promise

const debounceElement = document.getElementById("debounce");
const cancelElemetnt = document.getElementById("cancel");

const handleClick = function (e) {
  console.log("One click", e, this);
  return "HandleClick return value";
};

function debounce(fn, delay, immediate = false) {
  let timer = null;
  let isInvoke = false;
  function _debounce(. args) {
    return new Promise((resolve, reject) = > {
      if (timer) clearTimeout(timer);

      if(immediate && ! isInvoke) {try {
          const result = fn.apply(this, args);
          isInvoke = true;
          resolve(result); // Correct callback
        } catch (err) {
          reject(err); // Error callback}}else {
        timer = setTimeout(() = > {
          try {
            const result = fn.apply(this, args); 
            isInvoke = false;
            resolve(result); // Correct callback
          } catch (err) {
            reject(err); // Error callback} }, delay); }}); } _debounce.cancel =function () {
    clearTimeout(timer);
    timer = null;
  };
  return _debounce;
}

const debonceClick = debounce(handleClick, 300.true);
// Create a debonceCallBack to test the returned value
const debonceCallBack = function (. args) {
  debonceClick.apply(this, args).then((res) = > {
    console.log({ res });
  });
};

debounceElement.onclick = debonceCallBack;
cancelElemetnt.onclick = () = > {
  console.log("Cancelled the event.");
  debonceClick.cancel();
};
Copy the code

3. Implement the throttle function

3.1 V-1 is basically realized

Here is the main logic, as long as this time to listen for the mouse movement event trigger time minus the last trigger time is greater than the interval we set to perform the desired action


n o w T i m e – l a s t T i m e > i n t e r v a l nowTime – lastTime > interval

NowTime: the time when the mouse movement event is triggered

LastTime: Listen for the time triggered at the mouse movement event

Interval: The interval we set

const handleMove = () = > {
  console.log("Monitored for a mouse movement event.");
};

const throttle = function (fn, interval) {
  // Record the time when the current event is triggered
  let nowTime;
  // Record the last trigger time
  let lastTime = 0;

  // The function that is actually executed when the event is fired
  function _throttle() {
    // Get the current trigger time
    nowTime = new Date().getTime();
    // The current trigger time minus the last trigger time is greater than the set interval
    if(nowTime - lastTime > interval) { fn(); lastTime = nowTime; }}return _throttle;
};

document.onmousemove = throttle(handleMove, 1000);
Copy the code

3.2 this- Parameter V-2

As with anti-shock, the code above will also have this pointing to the problem and parameter passing

Optimization:

const handleMove = (e) = > {
	console.log("Monitored for a mouse movement event.", e, this);
};

const throttle = function (fn, interval) {
  let nowTime;
  let lastTime = 0;

  function _throttle(. args) {
    nowTime = new Date().getTime();
    if (nowTime - lastTime > interval) {
      fn.apply(this, args); lastTime = nowTime; }}return _throttle;
};

document.onmousemove = throttle(handleMove, 1000);
Copy the code

3.3 Optional Whether to perform V-3 immediately

The above function fires immediately the first time by default. What if we want to set ourselves to fire immediately the first time?

Optimization:

const handleMove = (e) = > {
  console.log("Monitored for a mouse movement event.", e, this);
};

const throttle = function (fn, interval, leading = true) {
  let nowTime;
  let lastTime = 0;

  function _throttle(. args) {
    nowTime = new Date().getTime();

    // leading for flase means that the function is not expected to execute immediately
    // lastTime 0 indicates that the function has not been executed
    if(! leading && lastTime ===0) {
      lastTime = nowTime;
    }

    if (nowTime - lastTime > interval) {
      fn.apply(this, args); lastTime = nowTime; }}return _throttle;
};

document.onmousemove = throttle(handleMove, 3000.false);
Copy the code

3.4 Optional Whether to Execute V-4 (Final Version) for the last time

The function will not execute if the last movement event listened for has not been executed before the specified interval, but sometimes we want to execute the function regardless of the specified interval. How do we do this?

Our logic is: because we do not know which time will be the last, we set a timer each time, timer interval is the time before the next execution of the function; Then each time you come in, you clear the last timer. This ensures that if this is the last time, the next time the function is executed, the last timer will be executed.

const handleMove = (e) = > {
  console.log("Monitored for a mouse movement event.", e, this);
};

// trailing is used to select whether to execute the last time
const throttle = function (fn,interval,leading = true,trailing = false) {
  let nowTime;
  let lastTime = 0;
  let timer;

  function _throttle(. args) {
    nowTime = new Date().getTime();
    // leading for flase means that the function is not expected to execute immediately
    // lastTime 0 indicates that the function has not been executed
    if(! leading && lastTime ===0) {
      lastTime = nowTime;
    }

    if (timer) {
      clearTimeout(timer);
      timer = null;
    }

    if (nowTime - lastTime >= interval) {
      fn.apply(this, args);
      lastTime = nowTime;
      return;
    }
		
    // Set a timer if last execution is selected
    if(trailing && ! timer) { timer =setTimeout(() = > {
        fn.apply(this, args);
        timer = null;
        lastTime = 0; }, interval - (nowTime - lastTime)); }}return _throttle;
};

document.onmousemove = throttle(handleMove, 3000.true.true);
Copy the code