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 相关文章推荐
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
理解Javascript闭包
Nov 01 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
原生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判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
ExtJS 入门
2010/10/29 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
css配合jquery美化 select
2013/11/29 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
python使用Berkeley DB数据库实例
2014/09/26 Python
Sanic框架应用部署方法详解
2018/07/18 Python
python实现弹窗祝福效果
2019/04/07 Python
python保留小数位的三种实现方法
2020/01/07 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
python利用线程实现多任务
2020/09/18 Python
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
教师党员个人剖析材料
2014/09/29 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
工商局个人工作总结
2015/03/03 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL