一、函數(shù)節(jié)流(throttle)

**函數(shù)節(jié)流：一個(gè)函數(shù)執(zhí)行一次后，只有大于設(shè)定的執(zhí)行周期后才會(huì)執(zhí)行第二次**。有個(gè)需要頻繁觸發(fā)函數(shù)，出于優(yōu)化性能角度，在規(guī)定時(shí)間內(nèi)，只讓函數(shù)觸發(fā)的第一次生效，后面不生效。

### 1.如何實(shí)現(xiàn)
其原理是用時(shí)間戳來(lái)判斷是否已到回調(diào)該執(zhí)行時(shí)間，記錄上次執(zhí)行的時(shí)間戳，然后每次觸發(fā) scroll 事件執(zhí)行回調(diào)，回調(diào)中判斷當(dāng)前時(shí)間戳距離上次執(zhí)行時(shí)間戳的間隔是否已經(jīng)到達(dá) 規(guī)定時(shí)間段，如果是，則執(zhí)行，并更新上次執(zhí)行的時(shí)間戳，如此循環(huán)；

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

### 2.函數(shù)節(jié)流的應(yīng)用場(chǎng)景
需要間隔一定時(shí)間觸發(fā)回調(diào)來(lái)控制函數(shù)調(diào)用頻率：

* DOM 元素的拖拽功能實(shí)現(xiàn)（mousemove）
* 搜索聯(lián)想（keyup）
* 計(jì)算鼠標(biāo)移動(dòng)的距離（mousemove）
* Canvas 模擬畫板功能（mousemove）
* 射擊游戲的 mousedown/keydown 事件（單位時(shí)間只能發(fā)射一顆子彈）
* 監(jiān)聽滾動(dòng)事件判斷是否到頁(yè)面底部自動(dòng)加載更多：給 scroll 加了 debounce 后，只有用戶停止?jié)L動(dòng)后，才會(huì)判斷是否到了頁(yè)面底部；如果是 throttle 的話，只要頁(yè)面滾動(dòng)就會(huì)間隔一段時(shí)間判斷一次

二、函數(shù)防抖(debounce)

**防抖函數(shù)：一個(gè)需要頻繁觸發(fā)的函數(shù)，在規(guī)定時(shí)間內(nèi)，只讓最后一次生效，前面的不生效。**

### 1.如何實(shí)現(xiàn)

其原理就第一次調(diào)用函數(shù)，創(chuàng)建一個(gè)定時(shí)器，在指定的時(shí)間間隔之后運(yùn)行代碼。當(dāng)?shù)诙握{(diào)用該函數(shù)時(shí)，它會(huì)清除前一次的定時(shí)器并設(shè)置另一個(gè)。如果前一個(gè)定時(shí)器已經(jīng)執(zhí)行過(guò)了，這個(gè)操作就沒有任何意義。然而，如果前一個(gè)定時(shí)器尚未執(zhí)行，其實(shí)就是將其替換為一個(gè)新的定時(shí)器，然后延遲一定時(shí)間再執(zhí)行。

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

### 2.函數(shù)防抖的應(yīng)用場(chǎng)景

對(duì)于連續(xù)的事件響應(yīng)我們只需要執(zhí)行一次回調(diào)：

* 每次 resize/scroll 觸發(fā)統(tǒng)計(jì)事件
* 文本輸入的驗(yàn)證（連續(xù)輸入文字后發(fā)送 AJAX 請(qǐng)求進(jìn)行驗(yàn)證，驗(yàn)證一次就好）

總結(jié)

以上所述是小編給大家介紹的微信小程序防止多次點(diǎn)擊跳轉(zhuǎn)和防止表單組件輸入內(nèi)容多次驗(yàn)證功能（函數(shù)防抖）,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

最新評(píng)論