JavaScript函数节流概念与用法实例详解


Posted in Javascript onJune 20, 2016

本文实例讲述了JavaScript函数节流概念与用法。分享给大家供大家参考,具体如下:

最近在做网页的时候有个需求,就是浏览器窗口改变的时候需要改一些页面元素大小,于是乎很自然的想到了window的resize事件,于是乎我是这么写的

<!DOCTYPE html>
<html>
<head>
  <title>Throttle</title>
</head>
<body>
  <script type="text/javascript">
    n=0;
    function resizehandler(){
      console.log(new Date().getTime());
      console.log(++n);
    }
    window.onresize=resizehandler;
  </script>
</body>
</html>

功能倒是实现了,但是我拖拽的方式改变浏览器窗口大小的时候看了下控制台

JavaScript函数节流概念与用法实例详解

没错,简单的一个拖拽让我的resizeHandler()方法执行了52次,这完全不是我想要的效果,实际上我的resizeHandler()方法的代码很复杂,甚至会使用ajax向服务器发送请求,要是简单的一次改变窗口大小就要调用52次这还了得

函数节流

其实我的本意只是窗口resize后页面做一些调整就可以,而window的resize事件并不是在resize结束后才触发的,具体则么个频率我也不知道,但却是在不停的调用,直到窗口大小不再变化。其实类似的机制还有鼠标的mousemove,都是在短时间内重复触发。

在《JavaScript高级程序设计》中有专门应对此问题的函数节流

function throttle(method,context){
  clearTimeout(method.tId);
  method.tId=setTimeout(function(){
    method.call(context);
  },500);
}

原理很简单,利用定时器,让函数执行延迟500毫秒,在500毫秒内如果有函数又被调用则删除上一次调用,这次调用500毫秒后执行,如此往复。这样我刚才的代码可以改为

<script type="text/javascript">
n=0;
function resizehandler(){
  console.log(new Date().getTime());
  console.log(++n);
}
function throttle(method,context){
  clearTimeout(method.tId);
  method.tId=setTimeout(function(){
    method.call(context);
  },500);
}
window.onresize=function(){
  throttle(resizehandler,window);
};
</script>

拖拽一下试试,果真只执行了一次

JavaScript函数节流概念与用法实例详解

另一种做法

网上还有一种函数节流方案,它是这么做的

function throttle(method,delay){
  var timer=null;
  return function(){
    var context=this, args=arguments;
    clearTimeout(timer);
    timer=setTimeout(function(){
      method.apply(context,args);
    },delay);
  }
}

调用一下试试,一样的效果

<script type="text/javascript">
n=0;
function resizehandler(){
  console.log(new Date().getTime());
  console.log(++n);
}
function throttle(method,delay){
  var timer=null;
  return function(){
    var context=this, args=arguments;
    clearTimeout(timer);
    timer=setTimeout(function(){
      method.apply(context,args);
    },delay);
  }
}
window.onresize=throttle(resizehandler,500);//因为返回函数句柄,不用包装函数了
</script>

JavaScript函数节流概念与用法实例详解

比较

两种方法都是利用了setTimeout,不同的是第二种方法加入的函数延迟执行时间,这个在第一种方案中很容易也具有此功能,加一个参数的事儿。

但第一种方案把tId设为函数的一个变量保存,而第二种创建了一个闭包来存储。个人觉得差距不大,很喜欢第一种,简单,高效。

新需求

有一天做了个类似的东西,就像百度首页输入自动提示一样的东西,我在text上绑定keyup事件,每次键盘弹起的时候自动提示,但是又不想提示那么频繁,于是我用了上面方法,但是悲剧了,只有停止输入等500毫秒才会提示,在输入过程中根本就没有提示。看了一下代码,可不是嘛,只要是用户会盲打,在500毫秒内按一下键盘,提示函数就会不断被延迟,这样只有停下来的时候才会提示,这就没意义了。

能不能在函数节流的基础上间隔固定时间就执行一次?

小改动

在网上搜了一下我们可以根据第二种写法(第一种为函数拓展多个变量感觉有些不好)做些改动,添加一个参数作为到固定间隔必须执行

function throttle(method,delay,duration){
  var timer=null, begin=new Date();
  return function(){
    var context=this, args=arguments, current=new Date();;
    clearTimeout(timer);
    if(current-begin>=duration){
       method.apply(context,args);
       begin=current;
    }else{
      timer=setTimeout(function(){
        method.apply(context,args);
      },delay);
    }
  }
}

这样每次我们判断间隔了多久,要是超过设置时间则立即执行一次,以刚才例子试一试效果

window.onresize=throttle(resizehandler,100,200);

JavaScript函数节流概念与用法实例详解

果真既没有频繁执行也没有就最后执行

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript URL编码和解码使用说明
Apr 12 Javascript
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
vue小白入门教程
Apr 02 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
vue-cli配置flexible过程详解
Jul 04 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 #Javascript
jquery通过name属性取值的简单实现方法
Jun 20 #Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 #Javascript
对jQuary选择器的全面总结
Jun 20 #Javascript
jQuery实现的可编辑表格完整实例
Jun 20 #Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 #Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 #Javascript
You might like
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
node跨域请求方法小结
2017/08/25 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
给Python入门者的一些编程建议
2015/06/15 Python
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
mac下如何将python2.7改为python3
2018/07/13 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
Python3的socket使用方法详解
2020/02/18 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
家居饰品店创业计划书
2014/01/31 职场文书
预备党员承诺书
2014/03/25 职场文书
个人工作表现评语
2014/04/30 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
庆六一开幕词
2015/01/29 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
2016年中秋节慰问信
2015/12/01 职场文书