JavaScript函数节流的两种写法


Posted in Javascript onApril 07, 2017

最近看了函数节流的相关内容,具体什么是节流我不讨论了,网上很多,这里总结下两个方法,我只认可其中一个。另一个貌似也能达到节流的效果但是感觉不是很正规。

方法一:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>函数节流</title>
 <style>
 div{
  font-size:40px;
  color:red;
  text-align: center;
 }
 </style>
</head>
<body>
<div>0</div>
 <script>
var a=0;
 var oDiv=document.getElementsByTagName('div')[0];
 var throttle=function(fn,wait){
 var startTime=new Date();
 return function(){
  var arg=arguments;
  var context=this;
  var curTime=new Date();
  // 如果达到了规定的触发时间间隔,触发 handler
  var remaing=wait-(curTime-startTime)
  if(remaing<=0||remaing>wait){//按理说remaing足够证明已经到了时间间隔,但是为了防止客户端修改了时间所以加个条件(为什么这么加我也不懂)
  fn.apply(context,arg);
  startTime=curTime;
  }
 };
 };
 window.onmousemove=throttle(function(){
  a++;
  oDiv.innerText=a+"";
 },2000);
 </script>
</body>
</html>

我比较认可这个方法,另外这是简洁版,还有一种可以是这样子的

function throttle(fun, delay, time) {
  var timeout,
    startTime = new Date();
  return function() {
    var context = this,
      args = arguments,
      curTime = new Date();
    clearTimeout(timeout);
    // 如果达到了规定的触发时间间隔,触发 handler
    if (curTime - startTime >= time) {
      fun.apply(context, args);
      startTime = curTime;
      // 没达到触发间隔,重新设定定时器
    } else {
      timeout = setTimeout(function(){
       fun.apply(context, args);
      }, delay);
    }
  };
};

就是在判断完时间间隔后再加个计时器来延迟,这个我觉得加不加都行,加了也没错跟时间判断互补,不加也能实现节流的效果。

第二类写法:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>函数节流</title>
 <style>
 div{
  font-size:40px;
  color:red;
  text-align: center;
 }
 </style>
</head>
<body>
<div>0</div>
 <script>
 var a=0;
 var oDiv=document.getElementsByTagName('div')[0];
 var throttle=function(fn,time){
  var timer=null;
  return function(){
  var arg=arguments;
  var context=this;
  if(timer){
   return false;
  }
  else{
  timer=setTimeout(function(){
   clearTimeout(timer);
   timer=null;
   fn.apply(context,arg);
  },time);
  }
 };
 };
 window.onmousemove=throttle(function(){
   a++;
 oDiv.innerText=a+"";
  },2000);
 </script>
</body>
</html>

这种写法通过判断是否存在正在进行的计时器来决定是否执行函数,存在就结束运行函数,但是那个计时器仍在队列里进行实践一到还会执行,通过运行也能达到节流,也就是间隔固定的时间触发函数,但是我就是不太喜欢这种写法。可能是这种方法没第一种直接吧。 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
七个很有意思的PHP函数
May 12 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
深入理解Vue nextTick 机制
Apr 28 Javascript
原生JS实现圆环拖拽效果
Apr 07 #Javascript
Zepto实现密码的隐藏/显示
Apr 07 #Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 #Javascript
详解JS中遍历语法的比较
Apr 07 #Javascript
JavaScript原生数组Array常用方法
Apr 06 #Javascript
微信小程序 图片宽度自适应的实现
Apr 06 #Javascript
微信小程序 下拉菜单的实现
Apr 06 #Javascript
You might like
php mysql数据库操作类
2008/06/04 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
Django models文件模型变更错误解决
2020/05/11 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
副科竞争上岗演讲稿
2014/05/12 职场文书
信息员培训方案
2014/06/12 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
高中军训的心得体会
2014/09/01 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
大学学生会竞选稿
2015/11/19 职场文书
商业计划书之服装
2019/09/09 职场文书
Tomcat配置访问日志和线程数
2022/05/06 Servers
MySQL数据库之存储过程 procedure
2022/06/16 MySQL