函数防抖与函数节流

作用： 节省浏览器CPU资源

函数防抖

　　应用场景：用户输入手机号完毕后再进行验证。

var timer = null;
document.getElementById("phoneNum").addEventListener('keyup', function(){
     clearTimeout(timer);
     var val = this.value;
     timer = setTimeout(function(){
         if(val.length !== 11){
               alert('手机号格式错误！');
         }else{
               console.log('success !');
         }
     }, 1000);
});

函数节流

　　应用场景：监听页面元素滚动事件

var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 判断是否已空闲，如果在执行中，则直接return
        return;
    }

    canRun = false;
    setTimeout(function(){
        console.log("函数节流");
        canRun = true;
    }, 300);
};