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 相关文章推荐
html超链接打开窗口大小的方法
Mar 05 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
Javascript中parseInt的正确使用方式
Oct 17 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 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的安全
2006/10/09 PHP
php时区转换转换函数
2014/01/07 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
Python pandas库中的isnull()详解
2019/12/26 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
Python内置函数property()如何使用
2020/09/01 Python
python实现学生通讯录管理系统
2021/02/25 Python
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
副总经理岗位职责
2014/03/16 职场文书
职业生涯规划书前言
2014/04/15 职场文书
企业党员个人自我评价
2014/09/20 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书