1.节流

根据字面意思理解就是节省资源，那么在前端开发中表达的意思就是说在某个事件持续触发的时候，可能伴随大量的服务器端请求，但实际上某些请求是不必要响应的，这就好比有一百个人同时给你发消息，你只是选择性的回复，而不是每个人的消息都回复，所以服务器对冗余的请求是没必要响应的，这样一来可以节省服务器资源，实现方式也是多样的，常见的方法是可以设置定时器，间隔某一段时间在响应，还有监听页面滚动距离，只有当页面滚动距离大于某一个值时才开始响应，而不是一滚动鼠标滚轮就开始响应。

下面举个例子

通过监听页面尺寸改变来动态显示数据，初步代码如下：

显然可以看出，只要页面尺寸有变动，页面上的数字就会立即改变，就如同我在写这篇文章时，上面的代码片段只要我在编辑框输入文字，它就会不断的渲染，很明显开发者没有考虑到这一点🧐。

下面对代码功能进行控制，添加如下节流控制函数，

    function throttle(func,delay){
      let timer;
      return function(){
        let self=this;
        let args=arguments;
        if(timer){
          return;
        }
        timer=setTimeout(function(){
          func.apply(self,args);
          timer=null;
        },delay);
      }
    }

再次执行：

发现数据的改变不会太快，而是在指定的时间间隔之后触发，达到了节流的目的。

节流的另外一种实现方法：利用时间戳，

function throttle(func,delay){
    let pre=0;
    return function(){
        let now=new Date();
        let self=this;
        let args=arguments;
        if(now-pre>delay){
            func().apply(self,args);
            pre=now;
        }
    }
}

以上就是本文的主要内容了，如有疑问，欢迎评论区交流。

前端开发之节流的实现

1.节流

下面举个例子