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 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
JavaScript之自定义类型
May 04 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 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 Socket技术
2013/08/02 PHP
php实现的递归提成方案实例
2015/11/14 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
印刷技术专业自荐信
2014/09/18 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
神农溪导游词
2015/02/11 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
公证书
2019/04/17 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书