前言

上一篇文章说到防抖，说到防抖很多人就会想起节流，还是举个简单的例子，在游戏里，节流就是你玩振刀，振个 100 次也就只有那一次有效。在代码里，节流就是高频事件触发，但在 n 秒内只会执行一次

这两个概念貌似有点相似又有点不同，可以通过使用 setTimeout 实现，目的都是降低回调执行频率，但是防抖是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行

节流的实现

当我们需要统计用户滚动屏幕时作出相应的网页反应，我们就需要用到节流了，因为用户不断地进行滚动就会不断产生请求，容易阻塞网络

我们可以在触发时间的时候马上执行任务然后设定时间间隔限制，这段时间内不管用户如何进行滚动都忽略掉，时间到了以后如果监测到有滚动行为再次执行任务并设定时间间隔限制

假设我们监听用户改变页面尺寸的事件，并且改变的时候有相应背景图片颜色改变的效果。首先设置监听事件，监听 reisze 窗口变化，创建一个函数为触发任务，函数里为 r，g，b 设置随机值

function coloring(){  let r=Math.floor(Math.random()*255)  let g=Math.floor(Math.random()*255)  let b=Math.floor(Math.random()*255)  document.body.style.background=`rgb(${r},${g},${b})`}
window.addEventListener('resize',coloring)

首先创建一个节流函数，这个节流函数和防抖函数一样，需要两个基本的参数，执行任务的函数和延迟的时间，函数里也同样需要返回一个函数让对象有可执行的内容

function throttle(func,delay){  return function(){
  }}
window.addEventListener('resize',throttle(coloring,2000))

还要设置一个时间间隔，这个时间间隔给后面的任务来判断是否执行的表示，因此要创建一个变量，就和防抖一样，这样多个任务才可以通过闭包的形式对这个变量进行操作，最后在 setTimeout 里执行任务函数

function throttle(func,delay){  let timer  return function(){    timer=setTimeout(function(){      func()    }, delay);  }}

最后可以进行节流的核心代码，也就是判断触发的事件是否在时间间隔内，在，就不触发时间，不在，就触发事件

就是说如果 timer 被赋值了，暂时还不改变 timer 的值，timer 没有被赋值就给它赋值执行任务，我们使用 if 判断，为 true 就是被赋值了，直接 return 出去，为 flase 就为 timer 赋值进行延迟执行，延迟执行后清空 timer 的值

function throttle(func,delay){  let timer  return function(){    if(timer){      return    }    timer=setTimeout(function(){      func()      timer=null    }, delay);  }}

可以发现节流已经实现了，不管怎么改变页面大小，都是按照 2 秒间隔进行的，不过最后别忘了 this 指向的问题