JavaScript中节流的示例分析
小编给大家分享一下JavaScript中节流的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
前言
我们来聊一聊节流——另一个优化函数的思想。
我们还是以移动事件举例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #wrapper { width: 100%; height: 140px; background: rgba(0, 0, 0, 0.8); color: #fff; font-size: 30px; font-weight: bold; line-height: 140px; text-align: center; } </style></head><body> <p id="wrapper"></p> <script> var count = 1; function moveAction () { oWrapper.innerHTML = count++; } var oWrapper = document.querySelector('#wrapper');oWrapper.onmousemove = moveAction; </script></body></html>它的效果是这样：
一、核心和基本实现
节流的原理很简单：如果你持续触发某个事件，特定的时间间隔内，只执行一次。
关于节流的实现，有两种主流的实现方式：
时间戳思路
定时器思路
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; // 更新上一次触发的时间 } }}来看看借助它，效果是什么样的：
我们可以看到：
当鼠标移入的时候，事件立刻执行
每过 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中节流的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
