函数节流与函数防抖

概念：

• 函数节流: 指定时间间隔内只会执行一次任务；
• 函数防抖: 任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。

区别：

　　两者区别在于函数节流是固定时间做某一件事，比如每隔1秒发一次请求。而函数防抖是在频繁触发后，只执行一次（两者的前提都是频繁触发）。

函数节流

　　运用场景：函数节流的应用场景一般是onrize，onscroll等这些频繁触发的函数，比如你想获取滚动条的位置，然后执行下一步动作。

　　说明：如果监听后执行的是Dom操作，这样的频繁触发执行，可能会影响到浏览器性能，甚至会将浏览器卡死，因此我们想到（可以规定他多少秒执行一次），这种方法叫函数节流（出场啦）。

　　处理方式一：

// 限制500ms执行一次
var type = false;
window.onscroll = function(){
    if(type === true) return;
    type = true;
    setTimeout(()=>{
        console.log("要执行的事");
        type = false;
    },500)
}

　　处理方式二：

// 限制500ms执行一次
var time = null;
window.onscroll = function(){
    let curTime = newDate();
    if(time==null){
       time = curTime; 
    }
    if((curTime-time)>500){
        console.log("要执行的事");
    }
}

函数防抖

　　运用场景：输入框搜索自动补全事件，频繁操作点赞和取消点赞等等。

　　说明：频繁操作点赞和取消点赞，因此需要获取最后一次操作结果并发送给服务器。

　　处理方式：

var timer = null;
function click(){
    clearTimeout(timer);
    timer = setTimeout(()=>{
        ajax(...);
    },500)
}

　　实现说明：如果在500ms内频繁操作点赞或者取消点赞，则每次都会清除一次定时器然后重新创建一个。直到最后一次操作点赞或者取消点赞，然后等待500ms后发送ajax。

 

节流和防抖的结合

　　运用场景：如果想要每隔一段时间发送一次请求，而不是等到客户触发最后一次操作才发送请求，可以这样实现。

　　处理方式：

var startTime = null;
var timer = null;
function click(){
    let curTime = new Date();
    startTime = startTime == null?curTime:startTime;
    if((curTime - startTime)>1000){
        // 固定上一次操作离这一次操作间隔>1000ms，则发送一次。
        //这里常用于阶段性频繁操作
        startTime = curTime; // 为下一次函数触发做准备
        ajax(...);
    }else{
        // 否则则执行函数防抖
        clearTimeout(timer);
        timer = setTimeout(()=>{
                    ajax(xxx);
                },500);
    }
}

至此结束！！！