JavaScript节流模式原理与实现解析

<!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>