上一篇博文我們講到了節流函式的應用場景，我們知道了節流函式可以用在模糊查詢、scroller、onresize等場景；今天這篇我們來講防抖函式的應用場景：：

　　通過上一篇博文的學習，我們知道了防抖函式的原理：只有在事件觸發的時候才會延遲載入，如果在延遲載入之前再次觸發，則會重新整理延遲時間重新延遲，觸發次數有且只有觸發一次；

　　如果對防抖函式原理有疑惑，請點選連結跳轉到關於防抖函式講解的博文：https://www.cnblogs.com/dengyao-blogs/p/11436228.html

　　防抖函式一般是用於頻繁觸發事件，而我們只需要它觸發一次的場景，比如：輸入框的oninput事件、button按鈕點選事件、點贊等操作場景；

　　今天我們講的demo場景是防抖函式實現手機號碼校驗：

　　HTML檢視層程式碼：

　　<div id="app">
       <input type="text" placeholder="請輸入手機號碼" v-model="val" @keyup="check"/>
       <div class="box" v-show="statu==true">您輸入的手機號碼格式正確</div>
   </div>

　　首先我們檢視層程式碼是一個輸入框後面加上一個div作為提示資訊，HTML程式碼很簡單就不過多講解了；

　　JS資料邏輯層程式碼：

    //這裡我們要引入一個檔案，檔案裡面是防抖函式的是實現
　　<script src="test.js"></script>
    <script>
    // 例項化 vue物件
        new Vue({
            el:"#app",
            data:{
　　　　　　　　//val是雙向資料繫結繫結輸入框的值
                val:"",
　　　　　　　　//此處狀態值是根據狀態值的變化來修改後面div的提示資訊
                statu:false
            },
        mounted(){

        },
        methods:{
　　　　　　　　//check是我們繫結的輸入框的@keyup事件，注意這裡不能是函式，不然不會觸發，必須要是物件
            check:debounce(function(){
　　　　　　　　　　//這裡是我們呼叫方法，也就是我們要做的事情
                this.handle();
                console.log(new Date())
                }),
              handle(){
　　　　　　　　　　//此處輸入是為了統計handle事件觸發的次數
                  console.log(“函式防抖”)；
                 //這裡定義校驗規則
                  let reg = /^1[3|4|5|7|8][0-9]{9}$/;    
                  //校驗手機號規則
　　　　　　　　　　　//如果校驗不通過會返回false，如果校驗通過會返回true
                  if(reg.test(this.val)){
　　　　　　　　　　　　　　//修改狀態值方便上面的檢視層判斷展示
                      this.statu=true;
　　　　　　　　　　　　　　//動態的修改提示資訊
                      document.getElementsByClassName("box").innerHTML="您輸入的手機號碼格式錯誤";
                  }else{
                      this.statu=false;
                      document.getElementsByClassName("box").innerHTML="您輸入的手機號碼格式錯誤";
                  }
              },
        }
    })

　　test.js

    function debounce(fn) {   //預設300毫秒
        var timer;
        return function() {
            if(timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
　　　　　　　　定時器必須要更改this指向，可以用apply、bind、或者上面用變數轉換等方式來進行更改this指向
　　
                fn.apply(this);   // this 指向vue
            }, 1000);
        };
    }

　　最後，我們的效果圖如下（這裡只是簡單的模擬效果，檢視層搭建的不是很美觀）：

 　　我們可以看到我們列印的結果只輸出了一次，如果不使用防抖函式，這裡是會觸發11次的，因為一共輸入了11個字元；假設我們的方法體中是傳送ajax和操作DOM呢？為了一個手機號碼校驗，難道我們要進行11次甚至更多次的ajax請求或者DOM操作嗎？如果是那樣，我們的程式效能可想而知，所以說防抖函式是一種效能提升方案；

　　上述講述的是我們之前常見的cdn方式引入vue，那麼我們如何在vue-cli腳手架中使用防抖函式來進行提升效能呢？

　　vue-cli：

　　首先我們可以在build資料夾中新建一個js檔案，這裡我們定義common.js：

　　common.js

// 函式防抖
export function debounce(fn, delay) {
    // 記錄上一次的延時器
    var timer = null;
    var delay = delay || 200;
    return function() {
    //   var args = arguments;
      var that = this;
      // 清除上一次延時器
      clearTimeout(timer)
      timer = setTimeout(function() {
          fn.apply(that)
      }, delay);
    }
  }

　　注意：我們在vue-cli中自定義方法必須要export丟擲，不然元件讀取不到

　　然後我們到我們需要用的檔案中來進行引入和使用：

　　需要使用的元件：

import {debounce} from "../../build/common"

　　有丟擲就一定有引入，我們這裡用import來引用common.js檔案裡面的方法，這裡的debounce就是我們用來接收common.js裡面方法的變數；

　　呼叫方式跟上面的一樣：

這裡的search是檢視層繫結的觸發事件，注意這裡也需要是物件的形式來呼叫
methods:{
  Search:debounce(function(){console.log(1234);},1000),  
}

　　　總結：

　　　　　　1、防抖函式和節流函式均屬於一種效能優化方案，有效的使用可以提升程式效能，提升使用者體驗；

　　　　　　2、防抖函式可適用於點贊、輸入框校驗、取消點贊、建立訂單等不可讓使用者同一時間內頻繁進行操作的場景；

&n