Methods in JavaScript that prevent event functions from being triggered and called at high frequencies

The most basic function of JavaScript in web pages is to listen to or respond to the user's actions, which is very useful. Some of the user's actions are very frequent and some are very rare. Some of the listener functions execute like lightning, while others drag the browser to death. Take the browser window's resize event, which triggers every change in the size of the browser window.

Obviously, we can't allow the browser to be dragged down, but we can't remove the delete listener. However, we can limit the frequency of function calls and minimize the impact of event function running. Instead of letting every change in the size of the window trigger the listener function once, we can now listen to the function firing at a minimum interval of more than a few milliseconds, keeping it on the right channel to ensure that it does not destroy the user experience. There's a great library of js tools called (link: http://underscorejs.org/), which has a simple way to easily create listeners that lower the frequency of event function triggers.

JavaScript code

The code for the frequency down listener is simple:

//Create a listener 

var updateLayout = _.debounce(function(e) {
 // Does all the layout updating here
}, 500); //Run at a minimum of 500 milliseconds
// Add the event listener

window.addEventListener("resize", updateLayout, false);

 ... This period of Underscore.js The underlying code is actually used interval Check the frequency of event function calls: 
// Returns a function, that, as long as it continues to be invoked, will not

// be triggered. The function will be called after it stops being called for

// N milliseconds. If `immediate` is passed, trigger the function on the

// leading edge, instead of the trailing.

_.debounce = function(func, wait, immediate) {

 var timeout;

 return function() {

  var context = this, args = arguments;

  var later = function() {

   timeout = null;

   if (!immediate) func.apply(context, args);

  };

  var callNow = immediate && !timeout;

  clearTimeout(timeout);

  timeout = setTimeout(later, wait);

  if (callNow) func.apply(context, args);

 };

};

The code isn't particularly complicated, but it's a blessing not to have to write it yourself. The debounce function does not rely on any other line.js functions, so you can add this method to your favorite js libraries, such as jQuery or MooTools, easily:

// MooTools

Function.implement({

 debounce: function(wait, immediate) {

  var timeout, 

      func = this;

  return function() {

   var context = this, args = arguments;

   var later = function() {

    timeout = null;

    if (!immediate) func.apply(context, args);

   };

   var callNow = immediate && !timeout;

   clearTimeout(timeout);

   timeout = setTimeout(later, wait);

   if (callNow) func.apply(context, args);

  };

 }

});
// Use it!

window.addEvent("resize", myFn.debounce(500));

As mentioned above, the resize event of the window is the most common place to use the frequency reduction operation, and another common place is to give an automatic completion prompt based on the user's key input. I love collecting code snippets that make your site more efficient and easy. It is also recommended to take a look at Underscore. Js, which provides a number of very useful functions.