JavaScript 节流函数 Throttle 详解


Posted in Javascript onJuly 04, 2016

在浏览器 DOM 事件里面,有一些事件会随着用户的操作不间断触发。比如:重新调整浏览器窗口大小(resize),浏览器页面滚动(scroll),鼠标移动(mousemove)。也就是说用户在触发这些浏览器操作的时候,如果脚本里面绑定了对应的事件处理方法,这个方法就不停的触发。 

这并不是我们想要的,因为有的时候如果事件处理方法比较庞大,DOM 操作比如复杂,还不断的触发此类事件就会造成性能上的损失,导致用户体验下降(UI 反映慢、浏览器卡死等)。所以通常来讲我们会给相应事件添加延迟执行的逻辑。

 通常来说我们用下面的代码来实现这个功能:

var COUNT = 0;
function testFn() { console.log(COUNT++); }
// 浏览器resize的时候
// 1. 清除之前的计时器
// 2. 添加一个计时器让真正的函数testFn延后100毫秒触发
window.onresize = function () {
 var timer = null;
 clearTimeout(timer);

 timer = setTimeout(function() {
  testFn();
 }, 100);
};

细心的同学会发现上面的代码其实是错误的,这是新手会犯的一个问题:setTimeout 函数返回值应该保存在一个相对全局变量里面,否则每次 resize 的时候都会产生一个新的计时器,这样就达不到我们发的效果了 

于是我们修改了代码:

var timer = null;
window.onresize = function () {
 clearTimeout(timer);
 timer = setTimeout(function() {
  testFn();
 }, 100);
};

这时候代码就正常了,但是又多了一个新问题 —— 产生了一个全局变量 timer。这是我们不想见到的,如果这个页面还有别的功能也叫 timer 不同的代码之前就是产生冲突。为了解决这个问题我们要用 JavaScript 的一个语言特性:闭包 closures 。相关知识读者可以去 MDN 中了解,改造后的代码如下:

/**
 * 函数节流方法
 * @param Function fn 延时调用函数
 * @param Number delay 延迟多长时间
 * @return Function 延迟执行的方法
 */
var throttle = function (fn, delay) {
 var timer = null;

 return function () {
  clearTimeout(timer);
  timer = setTimeout(function() {
   fn();
  }, delay);
 }
};
window.onresize = throttle(testFn, 200, 1000);

我们用一个闭包函数(throttle节流)把 timer 放在内部并且返回延时处理函数,这样以来 timer 变量对外是不可见的,但是内部延时函数触发时还可以访问到 timer 变量。 

当然这种写法对于新手来说不好理解,我们可以变换一种写法来理解一下:

var throttle = function (fn, delay) {
 var timer = null;

 return function () {
  clearTimeout(timer);
  timer = setTimeout(function() {
   fn();
  }, delay);
 }
};

var f = throttle(testFn, 200);
window.onresize = function () {
 f();
};

这里主要了解一点:throttle 被调用后返回的 function 才是真正的 onresize 触发时需要调用的函数 

现在看起来这个方法已经接近完美了,然而实际使用中并非如此。举个例子: 

如果用户 不断的 resize 浏览器窗口大小,这时延迟处理函数一次都不会执行 

于是我们又要添加一个功能:当用户触发 resize 的时候应该 在某段时间 内至少触发一次,既然是在某段时间内,那么这个判断条件就可以取当前的时间毫秒数,每次函数调用把当前的时间和上一次调用时间相减,然后判断差值如果大于 某段时间 就直接触发,否则还是走 timeout 的延迟逻辑。

下面的代码里面需要指出的是:
 1.previous 变量的作用和 timer 类似,都是记录上一次的标识,必须是相对的全局变量
 2.如果逻辑流程走的是“至少触发一次”的逻辑,那么函数调用完成需要把 previous 重置成当前时间,简单来说就是:相对于下一次的上一次其实就是当前 

/**
 * 函数节流方法
 * @param Function fn 延时调用函数
 * @param Number delay 延迟多长时间
 * @param Number atleast 至少多长时间触发一次
 * @return Function 延迟执行的方法
 */
var throttle = function (fn, delay, atleast) {
 var timer = null;
 var previous = null;

 return function () {
  var now = +new Date();

  if ( !previous ) previous = now;

  if ( now - previous > atleast ) {
   fn();
   // 重置上一次开始时间为本次结束时间
   previous = now;
  } else {
   clearTimeout(timer);
   timer = setTimeout(function() {
    fn();
   }, delay);
  }
 }
};

实践:
 我们模拟一个窗口 scroll 时节流的场景,也就是说当用户滚动页面向下的时候我们需要节流执行一些方法,比如:计算 DOM 位置等需要连续操作 DOM 元素的动作
 完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>throttle</title>
</head>
<body>
 <div style="height:5000px">
  <div id="demo" style="position:fixed;"></div>
 </div>
 <script>
 var COUNT = 0, demo = document.getElementById('demo');
 function testFn() {demo.innerHTML += 'testFN 被调用了 ' + ++COUNT + '次<br>';}

 var throttle = function (fn, delay, atleast) {
  var timer = null;
  var previous = null;

  return function () {
   var now = +new Date();

   if ( !previous ) previous = now;
   if ( atleast && now - previous > atleast ) {
    fn();
    // 重置上一次开始时间为本次结束时间
    previous = now;
    clearTimeout(timer);
   } else {
    clearTimeout(timer);
    timer = setTimeout(function() {
     fn();
     previous = null;
    }, delay);
   }
  }
 };
 window.onscroll = throttle(testFn, 200);
 // window.onscroll = throttle(testFn, 500, 1000);
 </script>
</body>
</html>

我们用两个 case 来测试效果,分别是添加至少触发 atleast 参数和不添加:

// case 1
window.onscroll = throttle(testFn, 200);
// case 2
window.onscroll = throttle(testFn, 200, 500);

case 1 的表现为:在页面滚动的过程(不能停止)中 testFN 不会被调用,直到停止的时候会调用一次,也就是说执行的是 throttle 里面 最后 一个 setTimeout ,效果如图(查看原 gif 图): 

JavaScript 节流函数 Throttle 详解

case 2 的表现为:在页面滚动的过程(不能停止)中 testFN 第一次会延迟 500ms 执行(来自至少延迟逻辑),后来至少每隔 500ms 执行一次,效果如图

 JavaScript 节流函数 Throttle 详解

至此为止,我们想要实现的效果已经基本完成。后续的一些辅助性优化读者可以自己琢磨,如:函数 this 指向,返回值保存等。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
用js解决数字不能换行问题
Aug 10 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
webpack入门必知必会
Jan 16 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 #Javascript
实用jquery操作表单元素的简单代码
Jul 04 #Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 #Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 #Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 #Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 #Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 #Javascript
You might like
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
PHP中date()日期函数有关参数整理
2011/07/19 PHP
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
使用Python下载Bing图片(代码)
2013/11/07 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
详解python中各种文件打开模式
2020/01/19 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
django 模型中的计算字段实例
2020/05/19 Python
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
函授本科毕业生自我鉴定
2013/10/16 职场文书
大学生职业生涯规划方案
2014/01/03 职场文书
创业资金计划书
2014/02/06 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
2015年双拥工作总结
2015/04/08 职场文书
勤俭节约主题班会
2015/08/13 职场文书
python如何正确使用yield
2021/05/21 Python