Anti shake and throttling in JS

Time:2022-1-7
1、 Purpose: to prevent functions from being called frequently without meaning
2、 Understanding:
1. Debounce

Essence: a function is executed after it is no longer called for a specific period of time

Principle: set a timer. If the event is triggered again within the set time interval, the previous timer will be cleared and reset and timed. The function will not be executed until it is not triggered again within the specified time interval

Disadvantages: if the event is continuously triggered within a specified time interval, the calling method will be continuously delayed

Usage scenario: enter search in the text box (avoid multiple requests for interfaces during continuous input)

Personal popular understanding: events are triggered continuously, and only the last callback function is executed

Examples are as follows:

function showTop  () {
  var scrollTop = document.body.scrollTop ||document.documentElement.scrollTop;
  console. Log ('scroll bar position: '+ scrolltop);
}
function debounce(fn, delay) {
  let timer = null; // With closures
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(fn, delay) 
  }
}
window.onscroll=debounce(showTop,200)
2. Throttle

Essence: ensure that the function is executed at most once in a specific time

Principle: use the time stamp to judge whether it is time to recall the execution time, record the time stamp of the last execution, and then trigger the scroll event to execute the callback every time. In the callback, judge whether the interval between the current time stamp and the last execution time stamp has reached the specified time period. If so, execute and update the last execution time stamp

Usage scenario: resize, scroll, MouseMove and other events trigger listening

Personal popular understanding: when an event is triggered, the function is executed, and the function cannot be executed again within a certain time

Examples are as follows:

function showTop  () {
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  console. Log ('scroll bar position: '+ scrolltop);
}
function throttle(fn,delay){
  let valid = true;
  return function() {
  //
    if(!valid){
      return false
    }
    valid = false;
    setTimeout(() => {
       fn();
       valid = true;
      }, delay)
   }
}

Please note that the throttling function is not limited to the above implementation scheme. For example, without the help of setTimeout, you can replace the status bit with a timestamp, and then determine whether the timestamp difference is greater than the specified interval. You can also directly use the returned flag of setTimeout as a judgment condition to judge whether the current timer exists. If it exists, it means that it is still cooling, and after FN is executed, it means that the timer is activated. The principle is the same

3、 Summary

Summary:
Function anti shake: combine multiple operations into one operation. The principle is to maintain a timer. It is specified that the function will be triggered after the delay time, but if it is triggered again within the delay time, the previous timer will be cancelled and reset. In this way, only the last operation can be triggered.

Function throttling: the function is triggered only once in a certain time. The principle is to judge whether there is a delayed call function that is not executed.

Difference: no matter how frequently the event is triggered, function throttling will ensure that the real event processing function will be executed once within the specified time, and function anti shake will only trigger the function once after the last event. For example, in the scenario of unlimited page loading, we need users to send Ajax requests at regular intervals when scrolling the page, rather than requesting data when users stop scrolling the page. This scenario is suitable for throttling technology.

This article is referenced from:https://segmentfault.com/a/1190000018428170andhttps://www.jianshu.com/p/3d3f62b9d0adandhttps://blog.csdn.net/zuorishu/article/details/93630578

Recommended Today

RabbitMQ study notes

Table of contents Related concepts RabbitMQ Install RabbitMQ core part Hello World Work Queues release confirmation switch fanout exchange (pub/sub) direct exchange topic exchange dead letter queue delay queue Release Confirmation Advanced The switch receives the message confirmation callback Fallback message to producer when switch is not routable Backup switch other idempotency priority queue lazy […]