前言

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

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

如果對防抖函數原理有疑惑，請點擊鏈接跳轉到關于防抖函數講解的博文：http://www.survivalescaperooms.com/article/169350.htm

防抖函數一般是用于頻繁觸發事件，而我們只需要它觸發一次的場景，比如：輸入框的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);  }; }