js防抖和节流

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

 

函数防抖

 

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

 

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函数只会在1秒时间内执行一次，在滚动过程中并没有持续执行，有效减少了性能的损耗。

函数节流

函数节流：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉承勤俭节约的优良传统美德，我们就把水龙头关小，最好是如我们心意按照一定规律在某时间间隔内一滴一滴的往下滴。持续触发scroll事件时，并不立即执行handel函数，每隔1000毫秒才会执行一次handel函数。

实现函数节流我们主要有两种方法：时间戳和定时器

时间戳

var throttle = function(func, delay) { 
    var prev = Date.now(); 
    return function() { 
        var context = this; //this指向window ，handle里要调用this时用
        var now = Date.now(); 
        if (now - prev >= delay) { 
            func.apply(context);
            prev = Date.now();
         } 
    } 
}
function handle() { 
    console.log(Math.random());
} 
window.addEventListener('scroll', throttle(handle, 1000));                            

这个节流函数利用时间戳让第一次滚动事件执行一次回调函数，此后每隔1000ms执行一次，在小于1000ms这段时间内的滚动是不执行的。

定时器

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

当触发事件的时候，我们设置了一个定时器，在没到1000ms之前这个定时器为null，而到了规定时间执行这个函数并再次把定时器清除。也就是说当第一次触发事件，到达规定时间再执行这个函数，执行之后马上清除定时器，开始新的循环，那么我们看到的效果就是，滚动之后没有马上打印，而是等待1000ms打印，有一个延迟的效果，并且这段时间滚动事件不会执行函数。

总结

函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

函数节流：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

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

总结防抖和节流的区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行

防抖应用场景：登录按钮、注册按钮、搜索、排序效果、加载更多