欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-22 16:39:49
本文实例讲述了js执行控制之节流模式。分享给大家供大家参考，具体如下： 节流模式：对重复的业务逻辑进行控制，执行最后一次操作，并取消其他操作，以提高性能。 重复的业务逻...

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

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

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

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

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

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

源代码：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>www.jb51.net 节流器试用——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.jb51.net/code/htmljsrun测试上述代码，运行效果如下：

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

更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript操作dom技巧总结》、《javascript页面元素操作技巧总结》、《javascript事件相关操作与技巧大全》、《javascript查找算法技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript错误与调试技巧总结》

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

上一篇： MySQL本地登录及数据库导入导出

下一篇： Python爬虫设置代理IP

推荐阅读