js image stabilization and throttle

Today, a handwriting input check box, suddenly remembered the image stabilization with the throttle, a long time without thinking, memory is fuzzy, specially written down, deepen understanding and memory of some

First, anti-shake and the throttle is doing?

For example, writing a input box, you need to check handwriting, our general approach when you are finished entering lose focus, we have to listen out of focus events, check again, now more popular way to check is that you have entered will check out the error, but when you enter each character went to check, obviously inappropriate, then how do we do it, it would have to use the anti-shake.

There is a rolling load, the more general use, when the scroll to a location request to background data, this can be achieved by throttling the rolling load

Then, how

1. Shake Reduction (use the timer, then a period of time when there is no trigger, will be executed)

function debounce(fn, wait) {    
    var timeout = null;    
    return function() {        
        if(timeout !== null)   clearTimeout(timeout);        
        timeout = setTimeout(fn, wait);    
    }
}

window.addEventListener('scroll', debounce(test, 1000));

2. throttle

Timestamp:

var throttle = function(fun, delay) {            
　　var prev = Date.now();            
　　return function() {                
　　　　var _this= this;                               
　　　　var now = Date.now();                
　　　　if (now - prev >= delay) {                    
　　　　　　fun.apply(_this, arguments);                    
　　　　　　prev = Date.now();                
　　　　}            
　　}        
}        
     
window.addEventListener('scroll', throttle(test, 1000));

Use timers, for the first time will immediately execute the function, but the last time less than the delay, will not be executed

Timer:

var throttle = function(fun, delay) {            
    var timer = null;            
    return function() {                
        var _this = this;                            
        if (!timer) {                    
            timer = setTimeout(function() {                        
                fun.apply(_this , arguments);                        
                timer = null;                    
            }, delay);                
        }            
    }        
}        
        
window.addEventListener('scroll', throttle(test, 1000));

When the first trigger event, the function will not be executed immediately, but only after execution delay seconds, triggered when the last time, due to the delay timer delay, but also perform a function, a little imperfect

Timestamp + Timer:

var throttle = function(fun, delay) {     
    var timer = null;     
    var startTime = Date.now();     
    return function() {             
        var curTime = Date.now();             
        var t_delay= delay - (curTime - startTime);             
        var _this= this;                          
        clearTimeout(timer);              
        if (remaining <= 0) {                    
            fun.apply(_this, arguments);                    
            startTime = Date.now();              
        } else {                    
            timer = setTimeout(fun, t_delay);              
        }      
    }
}
window.addEventListener('scroll', throttle(test, 1000));

The first problem to solve executed immediately, when the last trigger time is less than delay, using the timer to complete the trigger

to sum up:

Image Stabilization: After the event is triggered, not triggered in a period of time, perform the function, if they are triggered during the event, the re-timing

Throttling: After the event is triggered, to ensure that within a period of time, be sure to perform a function