微信小程序防止多次點擊跳轉和防止表單組件輸入內容多次驗證功能（函數防抖）

一、函數節流(throttle)

**函數節流：一個函數執行一次后，只有大于設定的執行周期后才會執行第二次**。有個需要頻繁觸發函數，出于優化性能角度，在規定時間內，只讓函數觸發的第一次生效，后面不生效。

### 1.如何實現
其原理是用時間戳來判斷是否已到回調該執行時間，記錄上次執行的時間戳，然后每次觸發 scroll 事件執行回調，回調中判斷當前時間戳距離上次執行時間戳的間隔是否已經到達 規定時間段，如果是，則執行，并更新上次執行的時間戳，如此循環；

function throttle(fn, delay) {
// 記錄上一次函數觸發的時間
var lastTime = 0;
return function() {
// 記錄當前函數觸發的時間
var nowTime = Date.now();
if (nowTime - lastTime > delay) {
// 修正this指向問題
fn.call(this);
// 同步時間
lastTime = nowTime;
}
}
}
document.onscroll = throttle(function() { console.log('scroll事件被觸發了' + Date.now()) }, 200)

### 2.函數節流的應用場景
需要間隔一定時間觸發回調來控制函數調用頻率：

* DOM 元素的拖拽功能實現（mousemove）
* 搜索聯想（keyup）
* 計算鼠標移動的距離（mousemove）
* Canvas 模擬畫板功能（mousemove）
* 射擊游戲的 mousedown/keydown 事件（單位時間只能發射一顆子彈）
* 監聽滾動事件判斷是否到頁面底部自動加載更多：給 scroll 加了 debounce 后，只有用戶停止滾動后，才會判斷是否到了頁面底部；如果是 throttle 的話，只要頁面滾動就會間隔一段時間判斷一次

二、函數防抖(debounce)

**防抖函數：一個需要頻繁觸發的函數，在規定時間內，只讓最后一次生效，前面的不生效。**

### 1.如何實現

其原理就第一次調用函數，創建一個定時器，在指定的時間間隔之后運行代碼。當第二次調用該函數時，它會清除前一次的定時器并設置另一個。如果前一個定時器已經執行過了，這個操作就沒有任何意義。然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器，然后延遲一定時間再執行。

<button id='btn'>按鈕</button>
<script type="text/javascript">
function debounce(fn, delay) {
// 記錄上一次的延時器
var timer = null;
return function() {
// 清除上一次延時器
clearTimeout(timer)
timer = setTimeout(function() {
fn.apply(this)
}, delay)
}
}
document.getElementById('btn').onclick = debounce(function() {
console.log('點擊事件被觸發' + Date.now())
}, 1000)
</script>

### 2.函數防抖的應用場景

對于連續的事件響應我們只需要執行一次回調：

* 每次 resize/scroll 觸發統計事件
* 文本輸入的驗證（連續輸入文字后發送 AJAX 請求進行驗證，驗證一次就好）

總結

以上所述是小編給大家介紹的微信小程序防止多次點擊跳轉和防止表單組件輸入內容多次驗證功能（函數防抖）,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！