一、什么是函数节流（throttle）

概念：限制一个函数在一定时间内只能执行一次。

二、为什么需要函数节流

前端开发过程中，有一些事件或者函数，会被频繁地触发（短时间按内多次触发），最常见的例如，onresize，scroll，mousemove ,mousehover 等，这些事件的触发频率很高，不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会造成计算机资源的浪费，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。这种问题显然是致命的。
除此之外，重复的 ajax 调用不仅可能会造成请求数据的混乱，还会造成网络拥塞，占用服务器带宽，增加服务器压力，显然这个问题也是需要解决的。

三、函数节流的代码实现

（1）方法一：时间戳方案

// 时间戳方案
function throttle(fn,wait){
    var pre = Date.now();
    return function(){
        var context = this;
        var args = arguments;
        var now = Date.now();
        if( now - pre >= wait){
            fn.apply(context,args);
            pre = Date.now();
        }
    }
}
function handle(){
    console.log(Math.random());
}
window.addEventListener("mousemove",throttle(handle,1000));

（2）方法二：定时器方案

function throttle(callback, wait){
    //定义开始时间
    let start = 0;
    //返回结果是一个函数
    return function(e){
        //获取当前的时间戳
        let now = Date.now();
        //判断
        if(now - start >= wait){
            //若满足条件, 则执行回调函数
            callback.call(this, e);
            //修改开始时间
            start = now;
        }
    }
}
 window.addEventListener('scroll', throttle(function(e){
            // console.log(Date.now());
            console.log(e);
        }, 500));

四、函数节流的使用场景

到此为止，相信各位应该对函数节流有了一个比较详细的了解，那函数节流一般用在什么情况之下呢？

懒加载、滚动加载、加载更多或监听滚动条位置；
百度搜索框，搜索联想功能；
防止高频点击提交，防止表单重复提交；

五、函数的防抖

代码如下：

debounce(callback, time){
    //定时器变量
    let timeId = null;
    //返回一个函数
    return function(e){
        //判断
        if(timeId !== null){
            //清空定时器
            clearTimeout(timeId);
        }
        //启动定时器
        timeId = setTimeout(() => {
            //执行回调
            callback.call(this, e);
            //重置定时器变量
            timeId = null;
        }, time);
    }
}

let input = document.querySelector('input');
 // input.onkeydown = function(e){
     // console.log(e.keyCode);
 // }

input.onkeydown = debounce(function(e){
      console.log(e.keyCode);
}, 1000);