什么是防抖節(jié)流豁延？
-
防抖： 簡單來說就是指觸發(fā)事件后在
n秒內(nèi)函數(shù)只能執(zhí)行一次（輸入框搜索自動補(bǔ)全事件、頻繁點贊和取消點贊、提交事件等等） -
節(jié)流： 簡單來說就是指連續(xù)觸發(fā)事件但是在
n秒中只執(zhí)行一次函數(shù)（發(fā)送驗證碼之宿、表單驗證肆汹、鼠標(biāo)移動事件等等）
小程序中使用
封裝文件 throttle.js（路徑：/utils/throttle.js）
/* 節(jié)流函數(shù)封裝 */
function throttle(fn, gapTime) {
if (gapTime == null || gapTime == undefined) {
gapTime = 1500
}
let _lastTime = null
// 返回新的函數(shù)
return function () {
let _nowTime = +new Date()
if (_nowTime - _lastTime > gapTime || !_lastTime) {
fn.apply(this, arguments) //將this和參數(shù)傳給原函數(shù)
_lastTime = _nowTime
}
}
}
/* 防抖函數(shù)封裝 */
function debounce(fn, interval) {
let timer;
let delay = interval || 1000; // 間隔的時間闪湾，如果interval不傳遍膜，則默認(rèn)1秒
return function () {
let that = this;
let args = arguments; // 保存此處的arguments爵赵，因為setTimeout是全局的等恐，arguments不是防抖函數(shù)需要的洲劣。
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
fn.apply(that, args); // 用apply指向調(diào)用debounce的對象，相當(dāng)于this.fn(args);
}, delay);
};
}
// 將寫好的方法拋出
module.exports = {
throttle,
debounce
}
使用的文件 home.wxml（路徑：pages/home/home.wxml）
<button bindtap="formSubmit">點擊觸發(fā)事件</button>
使用的文件 home.js（路徑：pages/home/home.js）
- 防抖函數(shù)：
// 引入封裝文件
var util = require('../../utils/throttle');
Page({
data: {},
// 調(diào)用防抖函數(shù)（觸發(fā)事件后在1秒內(nèi)函數(shù)只能執(zhí)行一次）
formSubmit: util.debounce(function () {
console.log("'防抖函數(shù)'")
}, 1000),
})
- 防抖函數(shù)實現(xiàn)效果
可以看到我們從一開始就瘋狂點擊课蔬，但是都沒有觸發(fā)打印囱稽，只有我們停下來后，才會觸發(fā)最后一次點擊事件二跋。 - 節(jié)流函數(shù)實現(xiàn)效果
可以看到在我們第一次點擊事件后战惊，觸發(fā)了打印，但當(dāng)我們在3秒內(nèi)又點擊了幾次都沒有觸發(fā)打印扎即，3秒后再次點擊才會觸發(fā)吞获。 - 節(jié)流函數(shù)：
// 引入封裝文件
var util = require('../../utils/throttle');
Page({
data: {},
// 調(diào)用節(jié)流函數(shù)（首次點擊后觸發(fā)打印况凉，3秒內(nèi)點擊按鈕都不會觸發(fā)，3秒后再次點擊觸發(fā)）
formSubmit: util.throttle(function (e) {
console.log('節(jié)流函數(shù)');
}, 3000),
})
