js对频繁触发事件的函数防抖和函数节流

1.场景

函数防抖：注册时邮箱的输入框，随着用户的输入，实时判断邮箱格式是否正确。此时，每一次的用户输入都触发邮箱格式检测事件，造成了浪费，于是设置两次输入之间的时间间隔大于800ms时（用户结束输入时），再执行检查邮箱格式。      

const filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
$("#email").on("keyup",checkEmail());
function checkEmail(){
    let timer=null;
    return function (){
        clearTimeout(timer);
        timer=setTimeout(function(){
            console.log('执行检查');
        },800);
    }
}
           
        
当第一次输入事件触发，设置定时：在800ms之后执行检查。      

假如只过了100ms，上次的定时还没执行，此时清除定时，重新定时800ms。      

紧跟着又来了一次输入，上次定时依然没执行，再次清除定时，重新定时800ms。      

...      

直到最近一次的输入，后面没有紧邻的输入了，这最近一次的输入定时计时结束，终于执行了检查代码。      

结果是：如果两次输入触发事件的时间间隔不足800ms的，不执行检查代码。 两次触发事件的时间间隔大于800ms了，则前面的执行检查。      

这就是传说中的 函数防抖。      

2.场景      

函数节流：一个加载新闻的列表页，只要滚动到页面的最下面就继续加载一部分新闻出来，即滚动加载。这时，就要监听滚动事件，判断若滚动      
   

到页面底部了，就执行加载新闻的代码。      

$(window).scroll(loadMore());
    function loadMore(){
        var canRun=true;
        return function(){
            if(!canRun){return;}
            canRun=false;
            setTimeout(function(){
                console.log("执行滚动事件");
                var docHeight=$(document).height();
                var winHeight=$(window).innerHeight();
                var scrollDistance=$(window).scrollTop();
                if( docHeight - (winHeight+scrollDistance) <=100 ){
                    console.log('加载中...');
                }
                canRun=true;
            },600);
        }
    }
           
        
由于滚动事件非常频繁，稍微滚动一下就会触发许多次，如果频繁触发的滚动，每一次都去检查是否到页面底部了再次造成了浪费。      

于是设置一个开关，一次只能有一个触发执行，并对执行设置计时一段时间再执行，执行完毕之后再解锁。这就是函数节流。