Detailed explanation of JS function throttling and anti-shake examples

This article mainly introduces JS function throttling and anti-shake. Function throttling and function anti-shake came into being to solve similar needs. Those who are interested can learn more about it. I hope it can help everyone.

In front-end development, some user behaviors will frequently trigger event execution, and performance-consuming processing such as DOM operations and resource loading may cause interface lags or even browser crashes. Function throttling (throttle) and function debounce (debounce) came into being to solve similar needs.

Function throttling (throttle)

Function throttling is to schedule a function to be executed only when it is greater than or equal to the execution cycle, and calls within the cycle will not be executed. It's like a drop of water will fall after it accumulates to a certain weight.

Scenario:

• Window resize (resize)

• Page scroll (scroll)

• Crazy purchase click (mousedown)

Achievement:

##

function throttle(method, delay){
  var last = 0;
  return function (){
    var now = +new Date();
    if(now - last > delay){
      method.apply(this,arguments);
      last = now;
    }
  }
}

document.getElementById('throttle').onclick = throttle(function(){console.log('click')},2000);

underscore implementation:

_.throttle = function(func, wait, options) {
  var context, args, result;
  var timeout = null;
  var previous = 0;
  if (!options) options = {};
  var later = function() {
    previous = options.leading === false ? 0 : _.now();
    timeout = null;
    result = func.apply(context, args);
    if (!timeout) context = args = null;
  };
  return function() {
    var now = _.now();
    if (!previous && options.leading === false) previous = now;
    //计算剩余时间
    var remaining = wait - (now - previous);
    context = this;
    args = arguments;
    //剩余时间小于等于0或者剩余时间大于等待时间(本地时间变动出现)
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };
};

Function debounce (debounce)

Function debounce means that when a function needs to be triggered frequently, it will only be executed when there is enough free time. once. It seems like the bus driver waits for everyone to get on the bus before exiting the bus.

Scene:

• Real-time search (keyup)

• Drag and drop (mousemove)

Implementation:

function debounce(method, delay){
  var timer = null;
  return function(){
    var context = this,args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function(){
      method.apply(context, args);
    },delay);
  }
}

document.getElementById('debounce').onclick = debounce(function(){console.log('click')},2000);

underscore implementation:

_.debounce = function(func, wait, immediate) {
  var timeout, args, context, timestamp, result;
  var later = function() {
    var last = _.now() - timestamp;
    if (last < wait && last >= 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;
      if (!immediate) {
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      }
    }
  };
  return function() {
    context = this;
    args = arguments;
    timestamp = _.now();
    var callNow = immediate && !timeout;
    if (!timeout) timeout = setTimeout(later, wait);
    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }
    return result;
  };
};

Function throttling (throttle) and function defense Debounce is a method to improve performance by delaying logical operations, and is a common and important solution in front-end optimization. You can understand the difference between the two from concepts and practical applications, and choose the appropriate method when needed.

Related recommendations:

Detailed explanation of throttling and anti-shaking of javascript functions

Detailed analysis of debouncing and throttling of JS functions Stream_Basic knowledge

The meaning of function throttling and anti-shake

The above is the detailed content of Detailed explanation of JS function throttling and anti-shake examples. For more information, please follow other related articles on the PHP Chinese website!