Stabilizer (Debounce) and the throttle (Throttle)

Scene Description : Generally, we will bind the elements click, scroll, onmousemove, resize events such as the front page, do for these events if it is to send a request to obtain data, we unconsciously give continuous clicking or continuous scroll with server to a lot of pressure, so we need to set every so often when the triggering event of continuous function execution events go, this is the background image stabilization and throttle arise.

E.g:

<div id="content" style="height:150px;background-color:#ccc;"></div>

Content = document.getElementById the let ( 'Content'); 

function fetchData () { 
	 the console.log ( 'test data I'); 
} 

content.onmousemove fetchData = ();

　　The code above bound onmousemove events div elements when the mouse passes div when it is on the move, continuously triggering event, assuming that the event need to execute the function requested data, it will have to initiate the request, resulting in unnecessary pressure on the server.

1, image stabilization

The concept : Indicates execution time latecomer in n seconds only once, if n seconds and triggered the event, it will recalculate the function execution time

Image stabilization function is divided into immediate execution and non-immediate execution Edition Version

(1) the immediate implementation edition

　　That is performed immediately after the trigger event function is executed immediately, and can not trigger an event in order to continue the effect of n seconds function, assuming that has been triggered in the event n seconds, the function is never executed until after the stop trigger n seconds, to achieve the following:

function debounce(func,wait){
  let timer;
  return function(){
    let context = this;
    let args = arguments;
    if(timer)  clearTimeout(timer);
    let callNow = !timer;  //记录计时器是否结束
    timer = setTimeout(()=>{
       time = null;  
    },wait);
    if(callNow){
         func.apply(context,args);
    }
  }
}
context.onmouseover = debounce(fetchData,1000);

(2) non-immediate execution Edition

　　Non-executed immediately after the trigger event function that is not performed immediately, but executed after n seconds, if n seconds and triggered the event, it will recalculate the execution function of time. To achieve the following:

function debounce(func,wait){
　　let timer;
　　return function(){
　　　　let contex = this;
　　　　let args = arguments;
　　　　if(timer)  clearTimeout(timer);
　　　　timer = setTimeout(()=>{
　　　　　　func.apply(contex,arguments);
　　　　},wait)
　　}
}
context.onmousemove = debounce(fetchData,1000)

2, throttling

　　Concept: refers to the continuous trigger event can only be performed within n seconds

　　Throttling, there are two ways to achieve a time stamp is, one is to use a timer.

　　(1) the timestamp

Throttle function (FUNC, the wait) { 
　　the let Last = 0; // last trigger timestamp 
　　return function () { 
　　　　the let Contex = the this; 
　　　　the let args = arguments; 
　　　　the let now + = new new a Date (); // current timestamp 
　　　　if (now - last> wait) { // executed when an interval longer than the wait 
　　　　　　Last = now; 
　　　　　　func.apply (context, args); 
　　　　} 
　　} 

}

　　(2) Timer

function throttle(func,wait){
　　let timer;
　　return function(){
　　　　let context = this;
　　　　let args = arguments;
　　　　if(!timer){
　　　　　　timer = setTimeout(()=>{
　　　　　　　　timer = null;
　　　　　　　　func.apply(context,args)
　　　　　　},wait)
　　　　}
　　}

}

Stabilizer (Debounce) and the throttle (Throttle)

Guess you like