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 相关文章推荐
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 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
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
php模块memcache和memcached区别分析
2011/06/14 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
php读取本地json文件的实例
2018/03/07 PHP
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
python django集成cas验证系统
2014/07/14 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
python 如何调用 dubbo 接口
2020/09/24 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
python实现发送邮件
2021/03/02 Python
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
免税水晶:Duty Free Crystal
2019/05/13 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
建房协议书
2014/04/11 职场文书
高一学生期末评语
2014/04/25 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
护理医院见习报告
2014/11/03 职场文书
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL