介绍 & lt; ! DOCTYPE html> & lt; html lang=癳n"祝辞& lt; head>
,,,& lt; meta charset=癠TF-8"比;
,,,& lt; meta name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比;
,,,& lt; meta http-equiv=癤-UA-Compatible",内容=癷e=edge"比;
,,,& lt; title> Document
,,,& lt; style>
,,,,,,,# wrapper {
,,,,,,,,,,,宽度:,100%;
,,,,,,,,,,,身高:,140 px;
,,,,,,,,,,,背景:,rgba (0, 0, 0, 0.8);
,,,,,,,,,,,颜色:,# fff;
,,,,,,,,,,,字体大小:,30 px;
,,,,,,,,,,,粗细:,大胆;
,,,,,,,,,,,行高:,140 px;
,,,,,,,,,,,text-align:,中心;
,,,,,,,}
,,,& lt;/style> & lt;/head> & lt; body>
,,,& lt; p id=皐rapper"祝辞& lt;/p>
,,,& lt; script>
,,,,,,,var count =, 1;
,,,,,,,function moveAction (), {
,,,,,,,,,,,oWrapper.innerHTML =, + +,
,,,,,,,}
,,,,,,,var oWrapper =, document.querySelector(& # 39; #包装# 39;);
时间=oWrapper.onmousemove moveAction;
,,,& lt;/script> & lt;/body> & lt;/html> <李> <李> oWrapper.onmousemove =,油门(moveAction, 1000); function 节流阀(函数,,等),{
,,,var _this,,参数;
,,,var prev =, 0;,//,上一次触发的时间,第一次默认为0
,,,return function (), {
,,,,,,,var 你=,Date.now();,//,触发时的时间
,,,,,,,_this =,;
,,,,,,,if (你安康;prev 祝辞,等),{
,,,,,,,,,,,func.apply (arg _this,),,//,允许传入参数,并修正
,,,,,,,,,,,prev =,,,//,更新上一次触发的时间
,,,,,,,}
,,,}} <李> <李> function 节流阀(函数,,等),{
,,,var _this,,参数;
,,,var 计时器;,//,初始化
,,,return function (), {
,,,,,,,_this =,,,//,记录
,,,,,,,arg =,参数,,//,记录参数数组
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
小编给大家分享一下JavaScript中节流的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强>前言
我们来聊一聊节流——另一个优化函数的思想。
我们还是以移动事件举例
它的效果是这样:
<强>一、核心和基本实现
节流的原理很简单:<>强如果你持续触发某个事件,特定的时间间隔内,只执行一次。
<强>关于节流的实现,有两种主流的实现方式:
时间戳思路
<李>定时器思路
1.1时间戳思路
顾名思义,通过两个时间戳来控制时间间隔,当触发事件的时候:
我们取出当前的时间戳现在<代码> ,
<李>然后减去之前<强>执行时强的时间戳(首次值为0)<代码>:,
<李>如果大<代码>现在- prev比;等,证明时间区间维护结束,执行指定事件,更新<代码> prev>
根据这一思路,我们就可以实现第一版代码了:
来看看借助它,效果是什么样的:
我们可以看到:
当鼠标移入的时候,<强>事件立刻执行
<李>每过1 s会执行一次,且移动2.5秒会执行2次,意味着动作<强>停止后不会再执行。
1.2定时器思路
利用定时器来保证间隔时间内事件的触发次数
创建定时器<代码>时间> 周期内,
<李>判断定时器是否存在,若存在则直接结束,否则执行事件;
<李><代码> 等待时间之后再次执行,并清掉定时器;
当触发事件的时候,我们设置一个定时器,再触发事件的时候,如果定时器存在,就不执行,直到定时器执行,然后执行函数,清空定时器,这样就可以设置下个定时器。
