深圳网站建设 骏域网站建设/中国国家人事人才培训网官网

定义

  限制在规定时间内只触发一次函数执行，将多余的触发给忽略掉。也可以直接理解节流就是节省流量（代码执行开销），将原本高频率的操作降低到我们设置的时间频率内执行。

适用场景

从定义可知节流主要是降低函数执行的频率，节省执行开销的同时并且不耽误正常的功能实现，所以它所适用的大多数就是那种触发频率极高的场景，如果我们不做处理并且触发的函数里面有一些开销比较大的操作（如大量操作dom或者进行ajax请求等）可能会造成浏览器性能阻塞造成卡顿。例如：

1、 浏览器窗口变化事件 window.onresize
浏览器窗口的大小在改变的时候onresize 事件触发的频率非常高.

2、 mousemove事件
当我们绑定了拖拽事件，进行拖拽的时候该事件同样也会被频繁的触发。

3、 scroll事件
窗口的滚动事件当进行滚动的时候也会被频繁的触发。

实现原理

从上述可知导致问题的原因就是因为函数被触发的频率太高导致，做了需要不必要的操作，所以我们只需要人为的将触发的频率降低到合适的频率即可。例如在拖拽事件进行的时候，想要进行发起请求可能一秒钟发一次或者两次就足以实现功能，那么我们就可以根据时间忽略掉其他不必要的请求。

代码实现

于函数节流的代码实现有许多种，下面将使用setTimeout 定时器延迟一段时间执行来实现。具体代码如下：

/**** @param {*} callback 需要执行的函数* @param {*} time 函数执行的间隔**/const saveTraffic = (callback, time) => {let timer,firstTime;return function(...res) {const _this = this;// 第一次调用直接执行即可if (firstTime) {callback.apply(_this, res);return firstTime = false;};if (timer) return;timer = setTimeout(() => {clearTimeout(timer);timer = null;callback.apply(_this, res);}, time || 500)}}

上述代码中将即将被执行的函数用 setTimeout 定时器延迟一段时间执行，如果该次延迟执行还没有完成，则忽略接下来调用该函数的触发。

测试

  window.onresize = saveTraffic(function(res) {console.log(1111, res)}, 300);