JS執(zhí)行控制之節(jié)流模式實(shí)例分析

更新時(shí)間：2018年12月21日 09:40:11 作者：huansky

這篇文章主要介紹了JS執(zhí)行控制之節(jié)流模式,結(jié)合實(shí)例形式分析了節(jié)流模式的功能、原理及相關(guān)使用方法,需要的朋友可以參考下

本文實(shí)例講述了JS執(zhí)行控制之節(jié)流模式。分享給大家供大家參考，具體如下：

節(jié)流模式：對重復(fù)的業(yè)務(wù)邏輯進(jìn)行控制，執(zhí)行最后一次操作，并取消其他操作，以提高性能。

重復(fù)的業(yè)務(wù)邏輯真的很讓人討厭的，但其中往往蘊(yùn)含著可被優(yōu)化的空間。

比如我們經(jīng)常碰到的一種情況：當(dāng)鼠標(biāo)移進(jìn)容器的時(shí)候，改變?nèi)萜鞯念伾划?dāng)鼠標(biāo)移出去的時(shí)候，恢復(fù)默認(rèn)顏色。

但是有時(shí)候是用戶不小心移進(jìn)來的，或者是不小心移出去的，但是效果卻消失了。這樣用戶的體驗(yàn)效果是非常不好的，這時(shí)候，我們就可以利用節(jié)流模式。

節(jié)流模式的核心思想是創(chuàng)造計(jì)時(shí)器，延遲程序的執(zhí)行。這也使得計(jì)時(shí)器中的回調(diào)函數(shù)的操作異步執(zhí)行，

源代碼：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>www.dbjr.com.cn 節(jié)流器試用——huansky</title>
</head>
<body>
  <div id="ttt">
    <p id="t1">我只有在鼠標(biāo)放置兩秒后才改變背景色，移出超過兩秒才恢復(fù)</p>
      <br>
    <p id="t2">我是正常的，只要鼠標(biāo)移進(jìn)來就改變背景色，移出就恢復(fù)</p>
    <br>
    <p id="t3">我只有在鼠標(biāo)放置兩秒后才改變背景色，移出超過兩秒才恢復(fù)</p>
  </div>
</body>
<script>
  /** 節(jié)流器
   *  @param isclear 獲取傳入的第一個(gè)參數(shù)
   * @param fn    第二個(gè)參數(shù)，表示函數(shù)
   **/
  var throttle=function () {
    var isclear=arguments[0],fn;
    if (typeof isclear==="boolean"){
      fn=arguments[1];
      //函數(shù)的計(jì)時(shí)句柄存在，就清除函數(shù)
      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,
      };
      //清除執(zhí)行句柄函數(shù)
      arguments.callee(true,fn);
      //為函數(shù)綁定計(jì)時(shí)器的句柄，延遲執(zhí)行函數(shù)
      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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，運(yùn)行效果如下：