节流防抖的原理与基本实现

使用场景

在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。

防抖

含义：持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。

简单的防抖代码：

function debounce(fn, wait) {    
    var timeout = null;    
    return function() {        
        if(timeout !== null)   clearTimeout(timeout);        
        timeout = setTimeout(fn, wait);    
    }
}
// 处理函数
function handle() {    
    console.log(Math.random()); 
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));

在持续触发scroll事件时，事件处理函数handle只在停止滚动1000毫秒后才会被调用一次，就是说在持续触发事件的过程中，事件处理函数handle一直都没有执行。

节流

含义：当持续的触发事件时，在一段时间只调用一次事件处理函数。

具体如下图：

持续的触发scroll事件时，并不立即执行handle函数，每隔1000毫秒才会执行一次函数。

实现：
实现函数节流主要有两种方式，时间戳与定时器。

1、时间戳实现

当高频事件触发时，第一次会立即执行，给事件绑定函数与真正触发事件的间隔一般大于delay,而后在频繁的触发事件，都是delay事件才执行一次。而当最后一次时间触发结束以后，事件也不会再执行。

var throttle = function(func, delay) {            
　　var prev = Date.now();            
　　return function() {                
　　　　var context = this;                
　　　　var args = arguments;                
　　　　var now = Date.now();                
　　　　if (now - prev >= delay) {                    
　　　　　　func.apply(context, args);                    
　　　　　　prev = Date.now();                
　　　　}            
　　}        
}        
function handle() {            
　　console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));

2、定时器实现：
在触发事件时，设置一个定时器，再次触发事件时，若定时器存在，就不执行，知道delay时间后，定时器执行函数，并且清空定时器，继续设置下一个定时器。

var throttle = function(func, delay) {            
    var timer = null;            
    return function() {                
        var context = this;               
        var args = arguments;                
        if (!timer) {                    
            timer = setTimeout(function() {                        
                func.apply(context, args);                        
                timer = null;                    
            }, delay);                
        }            
    }        
}        
function handle() {            
    console.log(Math.random());        
}        
window.addEventListener('scroll', throttle(handle, 1000));

第一次触发事件，不会立即执行函数，而是在delay后执行，之后再频繁的触发，也都是再delay时间执行一次，当最后一次停止触发后，由于定时器的delay延迟，可能还会执行一次函数。

总结

函数防抖：原理就是维护一个计时器，规定时间后触发函数，但是在规定时间内再次触发的话，就会取消之前的定时器重新设置，这样只有最后一次操作才会被触发。
函数节流：在一定时间内只触发一次函数，原理是通过判断是否到达一定时间来触发函数。

两者的区别：
节流是不管事件触发多频繁，保证规定时间内一定会执行一次真正的事件处理函数；
防抖只是在最后一次事件后才触发函数。在页面的无线加载场景下，我们需要用户在滚动页面时，每隔一段事件发一次AJAX请求，而不是在用户停止滚动页面操作才去请求数据。这种就需要节流来实现。