函数节流 函数防抖

函数节流：

在做一个上拉加载的时候，拉到底部某些位置的时候你是不是需要去请求数据，可是当用户一直在底部上下拉动的时候，是不是重复了大量的动作，所以为了避免重复动作时候，函数节流就是为了去优化这些高频率的动作。
我先给个示例代码以更好理解：

// 函数节流
var timer = false;
document.getElementById("debounce").onscroll = function(){
    clearTimeout(timer); // 清除未执行的代码，重置回初始化状态

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

通过一个条件在特定的时间差里，把最新的动作去覆盖上一步的动作。
核心：
让一个函数不要执行得太频繁，减少一些过快的调用来节流。
使用例子：
上拉加载

函数防抖：

比如做一个keyup搜索时候，如果持续输入10个字，是不是会触发10次请求，可是我起初的意愿是输入10个字的条件后获取到搜索内容，至于前面1~9的请求我是不需要的，这样既消耗了cup，也给服务器带了很多请求的压力。那怎么去优化呢？当然，函数防抖就是我需要讲的内容了。
看完上述所举的例子，你应该想到一些，函数防抖本意是为了优化一些高频率的JS动作，在时间差内只执行一次动作，示例代码如下：

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

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

通过代码可以理解，在这个时间差内如果动作还没执行完,就直接return

核心：
在一定时间段的连续函数调用，只让其执行一次

使用例子：
假设我们网站有个搜索框，用户输入文本我们会自动联想匹配出一些结果供用户选择。
我们可能首先想到的做法就是监听keypress事件，然后异步去查询结果。
这个方法本身是没错的，但是如果用户快速的输入了一连串的字符，假设是10个字符，那么就会在瞬间触发了10次的请求，这无疑不是我们想要的。
我们想要的是用户停止输入的时候才去触发查询的请求，这时候函数防抖可以帮到我们。