JS執行控制之節流模式實例分析

時間 2019-12-13

標籤執行控制節流模式實例分析欄目 JavaScript 简体版

原文原文鏈接

本文實例講述了JS執行控制之節流模式。分享給你們供你們參考，具體以下：css

節流模式：對重複的業務邏輯進行控制，執行最後一次操做，並取消其餘操做，以提升性能。html

重複的業務邏輯真的很讓人討厭的，但其中每每蘊含着可被優化的空間。前端

好比咱們常常碰到的一種狀況：當鼠標移進容器的時候，改變容器的顏色；當鼠標移出去的時候，恢復默認顏色。bash

可是有時候是用戶不當心移進來的，或者是不當心移出去的，可是效果卻消失了。這樣用戶的體驗效果是很是很差的，這時候，咱們就能夠利用節流模式。app

節流模式的核心思想是創造計時器，延遲程序的執行。這也使得計時器中的回調函數的操做異步執行，dom

源代碼：異步

<!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);
      //爲函數綁定計時器的句柄，延遲執行函數
歡迎加入全棧開發交流划水交流圈：582735936
面向划水1-3年前端人員
幫助突破划水瓶頸，提高思惟能力
      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>
複製代碼