上一篇講到了javascript的節流函數和防抖函數，那么我們在實際場合中該如何運用呢？

首先，我們來理解一下：節流函數首先是節流，就是節約流量、內存的損耗，旨在提升性能，在高頻率頻發的事件中才會用到，比如：onresize，onmousemove，onscroll，oninput等事件中會用到節流函數；

輸入框的模糊查詢功能原理分析

所謂模糊查詢就是不需要用戶完整的輸入或者說全部輸入信息即可提供查詢服務，也就是用戶可以在邊輸入的同時邊看到提示的信息（其實是查詢出來匹配到的信息），百度的搜索功能就是很好的模糊查詢的例子；其實模糊查詢的原理就是給輸入框綁定oninput事件監聽用戶輸入情況，然后每次用戶只要在輸入框中輸入了信息就觸發事件進行查詢然后實時展示；原理很簡單，但是實現起來會有一些問題，我們可以想想，每輸入一個字符都會觸發事件，那如果我們需要輸入很長的信息呢，那查詢是不是就得觸發多次？ajax連續多次觸發，再加上如果我們的方法體中有操作DOM元素的方法，那么必然會給我們的瀏覽器進入假死甚至崩潰狀態；那么我們有沒有辦法來解決此類問題呢？答案是：有的；（不了解模糊查詢功能的同學可以出門右轉去百度首頁試一下搜索，給你5分鐘，我等你回來）

HTML視圖層代碼：

  <div id="app">　　　　　　　　//輸入框，綁定輸入框的值是變量input_value的值,然后對輸入框做了事件綁定keyup，在用戶輸入的時候會觸發       <input type="text" placehold="請輸入id進行查詢" v-model="input_value" @keyup="throttle" ref="input"/>                <ul v-show="state">           <li v-for="(item,index) in list" :key="index" >            <span>{{item.id}}</span>            <span>{{item.name}}</span>            <span>{{item.time}}</span>         </li>      </ul>    </div>

從上述代碼中我們可以很明顯的看到DOM結構，就是一個輸入框，我們給輸入框加了ref屬性是為了方便我們后面操作DOM拿到輸入框的值（詳情可見ref和$refs的區別博文http://www.survivalescaperooms.com/article/167643.htm），然后下面有一個ul列表，不過ul列表是判斷展示的；（至于為什么會用v-show而不是v-if，可以點擊鏈接查閱之前的博文http://www.survivalescaperooms.com/article/168984.htm）；

js數據邏輯層代碼：

 // 實例化 vue對象    new Vue({      el:"#app",      data:{        input_value:"",        state:false,        statu:true,        dataList:[        { id: "1001", name: "哈哈", time: "20170207" },        { id: "1002", name: "呵呵", time: "20170213" },        { id: "1103", name: "曉麗", time: "20170304" },          { id: "1104", name: "小蘭", time: "20170112" },        { id: "1205", name: "財務", time: "20170203" },        { id: "1206", name: "嘻嘻", time: "20170208" },        { id: "1307", name: "測試", time: "20170201" }       ],           list:[]    },        methods:{//觸發keyup事件之后觸發的方法      search(){　　　　　　//這個變量主要是用來測試節流后和不節流的區別　　　　　　　　　　var i=0;　　　　　　　　　　console.log(i++);//定義的新數組存放篩選之后的數據        this.list=[];        //拿到當前input輸入框輸入的值        this.input_value=this.$refs.input.value;        //判斷展示ul列表，如果輸入了就展示沒輸入就不展示        if(this.input_value.length>0){          this.state=true;        }else{          this.state=false;        }                //循環模擬數據的數組        this.dataList.map((msg)=>{          //拿當前json的id、name、time去分別跟輸入的值進行比較          //indexOf 如果在檢索的字符串中沒有出現要找的值是會返回-1的，所以我們這里不等于-1就是假設輸入框的值在當前json里面找到的情況          if(msg.id.indexOf(this.input_value)!=-1  || msg.name.indexOf(this.input_value)!=-1 || msg.time.indexOf(this.input_value)!=-1){            //然后把當前json添加到list數組中            this.list.push(msg);          }        })      },    }  })