目录
- 前言
- 一、核心和基本实现
- 二、节流进阶
- 写在最后
（免费学习推荐：javascript视频教程）
前言
我们来聊一聊节流——另一个优化函数的思想。
立即学习“Java免费学习笔记（深入）”；
我们还是以移动事件举例
Document
它的效果是这样：
一、核心和基本实现
节流的原理很简单：如果你持续触发某个事件，特定的时间间隔内，只执行一次。
关于节流的实现，有两种主流的实现方式：
- 时间戳思路
- 定时器思路
1.1 时间戳思路
顾名思义，通过两个时间戳来控制时间间隔，当触发事件的时候：
- 我们取出当前的时间戳
now； - 然后减去之前执行时的时间戳(首次值为 0 )
prev； - 如果大
now - prev > wait，证明时间区间维护结束，执行指定事件，更新prev；
根据这一思路，我们就可以实现第一版代码了：
oWrapper.onmousemove = throttle(moveAction, 1000);function throttle(func, wait) {
var _this, arg;
var prev = 0; // 上一次触发的时间，第一次默认为0
return function () {
var now = Date.now(); // 触发时的时间
_this = this;
if (now - prev > wait) {
func.apply(_this, arg); // 允许传入参数，并修正this
prev = now; // 更新上一次触发的时间
}
}}来看看借助它，效果是什么样的：
YIXUNCMS中秋专版2.0.4
下载
系统介绍：YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统，使用增强版后台管控系统，板板设计符合节日特点。易迅软件工作室恭祝全国人民中秋快乐。特别提示：由于网站页面的不同设计，部分后台功能未在前端进行体现。系统特点：1、采用目前流行的PHP语言编写，底层采用超轻量级框架作为系统支撑；2、页面布局使用DIV+CSS技术，遵循WEB标准，及大提高页面的浏览速度；3、使用应
我们可以看到：
- 当鼠标移入的时候，事件立刻执行
- 每过 1s 会执行一次，且移动2.5s会执行2次，意味着动作停止后不会再执行。
1.2 定时器思路
利用定时器来保证间隔时间内事件的触发次数
- 创建定时器
timer，记录当前是否在周期内； - 判断定时器是否存在，若存在则直接结束，否则执行事件；
-
wait时间之后再次执行，并清掉定时器；
当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。
function throttle(func, wait) {
var _this, arg;
var timer; // 初始化
return function () {
_this = this; // 记录this
arg = arguments; // 记录参数数组
if (timer) return; // 时候未到
timer = setTimeout(() => {
func.apply(_this, arg); // 允许传入参数，并修正this
timer = null;
}, wait);
}}来看看借助它，效果是什么样的：
但是，我们可以看到：
- 当鼠标移入的时候，事件不会立刻执行;
- 鼠标定制后
wait间隔后会执行一次
1.3 两种思路的区别
| 时间戳 | 定时器 | |
|---|---|---|
| “起点” | 立即执行 | n 秒后执行 |
| “终点” | 停止后不会执行 | 停止会再执行一次 |
二、节流进阶
结合两种思想完成一个可以立即执行，且停止触发后再执行一次的节流方法：
// 第三版function throttle(func, wait) {
var timeout, context, args, result;
var previous = 0;
var later = function() {
previous = +new Date();
timeout = null;
func.apply(context, args)
};
var throttled = function() {
var now = +new Date();
//下次触发 func 剩余的时间
var remaining = wait - (now - previous);
context = this;
args = arguments;
// 如果没有剩余的时间了或者你改了系统时间
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
func.apply(context, args);
} else if (!timeout) {
timeout = setTimeout(later, remaining);
}
};
return throttled;}效果演示如下：
我在看代码的时候，我是反复打印数据才理解为什么会这样做，一起加油～
相关免费学习推荐：javascript（视频）
