如果對防抖函式原理有疑惑，鏈結跳轉到關於防抖函式講解的博文：
防抖函式一般是用於頻繁觸發事件，而我們只需要它觸發一次的場景，比如：輸入框的oninput事件、button按鈕點選事件、點讚等操作場景；
今天我們講的demo場景是防抖函式實現手機號碼校驗：
html檢視層**：
<首先我們檢視層**是乙個輸入框後面加上乙個div作為提示資訊，html**很簡單就不過多講解了；div
id>
<
input
type
="text"
placeholder
="請輸入手機號碼"
v-model
="val"
@keyup
="check"
/>
<
div
class
="box"
v-show
="statu==true"
>您輸入的手機號碼格式正確
div>
div>
js資料邏輯層**：
//這裡我們要引入乙個檔案，檔案裡面是防抖函式的是實現test.js//例項化 vue物件
newvue(,
mounted(),
methods:),
handle()$/;
//校驗手機號規則
//如果校驗不通過會返回false，如果校驗通過會返回true
if(reg.test(this
.val))
else},}
})
function debounce(fn)最後，我們的效果圖如下（這裡只是簡單的模擬效果，檢視層搭建的不是很美觀）：this); //
this 指向vue
}, 1000);};}
我們可以看到我們列印的結果只輸出了一次，如果不使用防抖函式，這裡是會觸發11次的，因為一共輸入了11個字元；假設我們的方法體中是傳送ajax和操作dom呢？為了乙個手機號碼校驗，難道我們要進行11次甚至更多次的ajax請求或者dom操作嗎？如果是那樣，我們的程式效能可想而知，所以說防抖函式是一種效能提公升方案；
上述講述的是我們之前常見的cdn方式引入vue，那麼我們如何在vue-cli腳手架中使用防抖函式來進行提公升效能呢？
vue-cli：
首先我們可以在build資料夾中新建乙個js檔案，這裡我們定義common.js：
common.js
//注意：我們在vue-cli中自定義方法必須要export丟擲，不然元件讀取不到函式防抖
export function
debounce(fn, delay) , delay);}}
然後我們到我們需要用的檔案中來進行引入和使用：
需要使用的元件：
import from "../../build/common"有丟擲就一定有引入，我們這裡用import來引用common.js檔案裡面的方法，這裡的debounce就是我們用來接收common.js裡面方法的變數；
呼叫方式跟上面的一樣：
這裡的search是檢視層繫結的觸發事件，注意這裡也需要是物件的形式來呼叫總結：1、防抖函式和節流函式均屬於一種效能優化方案，有效的使用可以提公升程式效能，提公升使用者體驗；methods:,1000),
}
2、防抖函式可適用於點贊、輸入框校驗、取消點讚、建立訂單等不可讓使用者同一時間內頻繁進行操作的場景；
工具類 手機號碼校驗
方便自己下次使用。public class checkphone d d d 中國電信號碼格式驗證 手機段 133,153,180,181,189,177,1700,173 private static final string china telecom pattern 1 33 53 7 37 ...
手機號碼的秘密
imsi 採用e 212格式 編碼格式為 mcc 460 mnc msin mcc 移動國家碼，三個數字，如中國為 460。mnc 移動網號，兩個數字，如中國移動的mnc為00 聯通是01，移動159新號段是02 msin 在某一plmn內ms唯一的識別碼,編碼格式為 h1 h2 h3 s nmsi...
js實現手機號碼脫敏
方法一 要求保留前三位和最後四位，中間對用 處理。如18912341234脫敏處理之後應該變成189 1234。處理方法如下 var str 18912341234 var pat d d d var b str.replace pat,1 2 console.log b 就是起到乙個分組作用，將匹...