[Turn] stabilization function and a throttle function

Original Address: https: //zhuanlan.zhihu.com/p/38313717

Anti-shake function and throttle is very similar concept, but they are not the same scenario.

We start with the concept of a deep understanding of them.

Let me talk about anti-shake function, debounce. In fact, the concept of which is from the mechanical switches and relays "to bounce" (Debounce) derived out of the basic idea is to merge the plurality of signals into one signal.

SLR has a similar concept, taking pictures when the hand shake when taking pictures if Nabu Wen general mobile phone is not a good photo shoot, so the smartphone is in continuous shooting when you click on many sheets, lead a synthetic means, generate a Zhang. Is translated into JS, N actions within the event will become negligible after only event triggered by the program `` action is only valid.

Realization of ideas below, the target method (action) wrapped in setTimeout inside, then this method is a callback event, if the callback has been executed, these actions would not have been executed. Why not enforce it, we engage in a clearTimeout, such setTimeout in the method will not be executed! Why clearTimeout it, we need continuous operation in the event to delete it! Until the user does not trigger this event. So setTimeout will naturally implement this method.

Then the method used in any place, that is used to validate the input frame input format, if only to verify the letters are worth mentioning, too simple, less consumption of performance, if it is to verify identity, which consume large performance, you It can be verified only once every 170ms. Then you need this stuff. This is a completely automatic or you need your input will pull data back end of a list, frequent interaction, the backend certainly can not afford to consume, then also you need this, such as every 350ms.

function debounce(func, delay) {
    var timeout;
    return function(e) {
        console.log("清除",timeout,e.target.value)
        clearTimeout(timeout);
        var context = this, args = arguments
        console.log("新的",timeout, e.target.value)
        timeout = setTimeout(function(){
          console.log("----")
          func.apply(context, args);
        },delay)
    };
};

var validate = debounce(function(e) {
    console.log("change", e.target.value, new Date-0)
}, 380);

// 绑定监听
document.querySelector("input").addEventListener('input', validate);

 

 

This ensures that every normal user can input characters 1, 2 trigger once. If the user is input spree, he can be ruthless system every three to six characters input trigger once.

The focus of this method is that it does not trigger when a user event, it triggers the action, and inhibit the action would have to be performed in the event.

Other Applications: submit button click event.

 

Look at the throttle, throttle. The concept throttling can imagine dams you build a dam in the river, can not let the water flow can not, you can let the water slowly. In other words, you can not make the user's methods are not implemented. If so dry, that is, the debounce. To give users a method performed only once in a period of time, we need to save the point in time the timer was last executed.

 

 <div id='panel' style="background:red;width:200px;height:200px">

 </div>

function Throttle (Fn, the threshhold) {
  var timeout
  var Start = new new a Date;
  var the threshhold the threshhold = 160. ||
  return  function () { 

 var context = the this , args = arguments, Curr = new new a Date () - 0 
 
 the clearTimeout (timeout) / / always kill event callbacks 
 IF (curr - Start> = threshhold) { 
     console.log ( "now", curr, curr - Start) // Note that the result of subtraction, almost about 160 
     fn.apply (context, args) // perform only part of the method, the method is performed in a certain period of time 
     Start = Curr 
 }the else {
  // allow the method can be performed again in the event from the 
     timeout = the setTimeout ( function () { 
        fn.apply (context, args) 
     }, the threshhold); 
    } 
  } 
} 
var mouseMove = Throttle ( function (E) { 
 Console. log (e.pageX, e.pageY) 
}); 

// bind listening 
document.querySelector ( "# panel") addEventListener ( 'mousemove', mousemove).;

Throttle function will be used in the event than the input, keyup more frequently triggered, such as resize, touchmove, mousemove, scroll. throttle Forcing function will be performed at a fixed rate. Therefore, this method is suitable for scenarios used in the animation-related.

 

If you still can not fully understand  debounce and  throttle differences, you can go to  this page  look at the visual comparison of the two.