JS执行控制之节流模式实例分析


Posted in Javascript onDecember 21, 2018

本文实例讲述了JS执行控制之节流模式。分享给大家供大家参考,具体如下:

节流模式:对重复的业务逻辑进行控制,执行最后一次操作,并取消其他操作,以提高性能。

重复的业务逻辑真的很让人讨厌的,但其中往往蕴含着可被优化的空间。

比如我们经常碰到的一种情况:当鼠标移进容器的时候,改变容器的颜色;当鼠标移出去的时候,恢复默认颜色。

但是有时候是用户不小心移进来的,或者是不小心移出去的,但是效果却消失了。这样用户的体验效果是非常不好的,这时候,我们就可以利用节流模式。

节流模式的核心思想是创造计时器,延迟程序的执行。这也使得计时器中的回调函数的操作异步执行,

源代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>3water.com 节流器试用——huansky</title>
</head>
<body>
  <div id="ttt">
    <p id="t1">我只有在鼠标放置两秒后才改变背景色,移出超过两秒才恢复</p>
      <br>
    <p id="t2">我是正常的,只要鼠标移进来就改变背景色,移出就恢复</p>
    <br>
    <p id="t3">我只有在鼠标放置两秒后才改变背景色,移出超过两秒才恢复</p>
  </div>
</body>
<script>
  /** 节流器
   *  @param isclear 获取传入的第一个参数
   * @param fn    第二个参数,表示函数
   **/
  var throttle=function () {
    var isclear=arguments[0],fn;
    if (typeof isclear==="boolean"){
      fn=arguments[1];
      //函数的计时句柄存在,就清除函数
      fn._throttleID && clearTimeout(fn._throttleID);
      if(fn._throttleI){
        console.log(fn._throttleID);
      }
    }
    else{
      fn=isclear;
      param=arguments[1];
      var p={
        context:null,
        args:[],
        time:800,
      };
      //清除执行句柄函数
      arguments.callee(true,fn);
      //为函数绑定计时器的句柄,延迟执行函数
      fn._throttleID=setTimeout(function(){
        //console.log(fn._throttleID);
        fn.apply(p.context,p.args);
      },p.time)
    }
  }
  var dom=document.getElementsByTagName("p");
  var Entefn1=function(){ dom[0].style.cssText="background-color:yellow";};
  var Entefn2=function(){ dom[1].style.cssText="background-color:blue";};
  var Entefn3=function(){ dom[2].style.cssText="background-color:red";};
  var Entefn11=function(){ dom[0].style.cssText="background-color:#fff";};
  var Entefn22=function(){ dom[1].style.cssText="background-color:#fff";};
  var Entefn33=function(){ dom[2].style.cssText="background-color:#fff";};
  dom[0].addEventListener("mouseover",function(){
    throttle(true,Entefn11);
    throttle(Entefn1);
  },false);
  dom[1].addEventListener("mouseover",Entefn2,false);
  dom[2].addEventListener("mouseover",function(){
    throttle(true,Entefn33);
    throttle(Entefn3);
  },false);
  dom[0].addEventListener("mouseout",function(){
    throttle(Entefn11);
    throttle(true,Entefn1);
  },false);
  dom[1].addEventListener("mouseout",Entefn22,false);
  dom[2].addEventListener("mouseout",function(){
    throttle(Entefn33);
    throttle(true,Entefn3);
  },false);
</script>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,运行效果如下:

JS执行控制之节流模式实例分析

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

Javascript 相关文章推荐
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
搞定immutable.js详细说明
May 02 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
js实现文字列表无缝滚动效果
Jun 23 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 #Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 #Javascript
微信小程序实现随机验证码功能
Dec 20 #Javascript
微信小程序实现发送验证码按钮效果
Dec 20 #Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 #Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 #Javascript
js canvas实现橡皮擦效果
Dec 20 #Javascript
You might like
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
PHP实现搜索相似图片
2015/09/22 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
extJs 下拉框联动实现代码
2010/04/09 Javascript
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
基本DOM节点操作
2017/01/17 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
python中定义结构体的方法
2013/03/04 Python
在Python中处理XML的教程
2015/04/29 Python
python判断windows系统是32位还是64位的方法
2015/05/11 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
生物技术专业研究生自荐信
2013/09/22 职场文书
党课学习思想汇报
2014/01/02 职场文书
战友聚会邀请函
2014/01/18 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题