JavaScript image stabilization and throttle

1 Overview

1.1 Description

　　In the course of the project, often you encounter a button is clicked multiple times and repeatedly call the corresponding functions deal with the problem, but often we just need to call a handler can be. Sometimes encountered the need to regularly trigger the corresponding processing function within a rule, so we need to use the anti-shake function and a function of the throttle to help us achieve the results we want and avoid unnecessary problems.

1.2 Stabilizer function (Debounce)

Definition: When the continuous trigger event (such as clicking a button continuously more than this), a period of time no longer trigger event, the event handler will be executed once, before the arrival if the time set, once triggered the event is restarted delay.

Principle: Maintain a timer function is triggered after a specified delay time, but is triggered again within the delay time, then it is canceled before the timer and reset, so it can ensure that only the last operation is triggered. All operations will soon be merged into one operation, and only the last operation is a valid operation.

1.3 throttle function (Throttle)

Definition: When the event to keep firing, to ensure that only a certain period of time to call an event handler, according to certain rules within a certain time interval to the handler.

Principle: The principle is to determine whether a certain time to trigger a function that is triggered only once within a certain time function.

 2. Code

2.1 anti-shake function

　　N seconds after the trigger function will be executed once a high-frequency event, if n seconds high frequency event is triggered again, time is recalculated

　　Delay before calling the method each time the trigger event canceled

function Debounce (Fn) { 
    the let timeout = null ; // Create a timer flag is used to store return values 
    return  function () { 
    the clearTimeout (timeout); // every time the user inputs a setTimeout clear out before 
    timeout = the setTimeout (() => { // then create a new setTimeout, so that we can ensure that in the interval after the input character spacing character input if there is, then it does not perform the function fn 
        fn.apply ( the this , arguments the); 
    }, 500 ); 
    }; 
} 
function the sayHi () { 
    the console.log ( 'successful stabilization' ); 
} 

var InP = document.getElementById ( 'InP' );
inp.addEventListener('input', debounce(sayHi)); // 防抖

2.2 throttle function

　　Event triggering frequency, but only once within n seconds, the execution frequency diluted throttling function

　　Every judge whether there is a trigger event is currently awaiting execution delay function

function Throttle (Fn) { 
    the let canrun = true ; // by a closure flag stored 
    return  function () {
     IF (canrun!) return ; // at the beginning of the function determines whether the flag is true, not true to return 
    canrun = to false ; // Now set to false 
    setTimeout (() => { // external execution of the function on the incoming setTimeout in 
        fn.apply ( the this , arguments);
         // Finally setTimeout finished before the flag is set to true (key) represents the cycle time can be performed when the timer flag is not executed is always false, at the beginning of the return out. 
        canrun = to true ; 
    }, 500  );
    };
}
function sayHi(e) {
    console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));