函数的防抖与节流

函数节流与函数防抖（以及它们的使用场景）

  时间:2019-02-27

本文章向大家介绍函数节流与函数防抖（以及它们的使用场景），主要包括函数节流与函数防抖（以及它们的使用场景）使用实例、应用技巧、基本知识点总结和需要注意事项。

概念

• 函数节流: 频繁触发,但只在特定的时间内才执行一次代码
• 函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码

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

函数节流

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

window.onscroll = function(){
    console.log("要执行的事");
}

如果监听后执行的是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);
    }
}

原文地址：http://www.manongjc.com/article/63262.html