vue實現手機號碼的校驗（防抖函數的應用場景）
- 2019 年 10 月 3 日
- 筆記
上一篇博文我們講到了節流函數的應用場景，我們知道了節流函數可以用在模糊查詢、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、防抖函數可適用於點贊、輸入框校驗、取消點贊、創建訂單等不可讓用戶同一時間內頻繁進行操作的場景；
