什么是防抖節(jié)流？
- 防抖：?簡(jiǎn)單來(lái)說(shuō)就是指觸發(fā)事件后在?
n?秒內(nèi)函數(shù)只能執(zhí)行一次（輸入框搜索自動(dòng)補(bǔ)全事件、頻繁點(diǎn)贊和取消點(diǎn)贊、提交事件等等）- 節(jié)流：?簡(jiǎn)單來(lái)說(shuō)就是指連續(xù)觸發(fā)事件但是在?
n?秒中只執(zhí)行一次函數(shù)（發(fā)送驗(yàn)證碼、表單驗(yàn)證、鼠標(biāo)移動(dòng)事件等等）
小程序中使用?
封裝文件 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; // 間隔的時(shí)間，如果interval不傳，則默認(rèn)1秒
return function () {
let that = this;
let args = arguments; // 保存此處的arguments，因?yàn)閟etTimeout是全局的，arguments不是防抖函數(shù)需要的。
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
fn.apply(that, args); // 用apply指向調(diào)用debounce的對(duì)象，相當(dāng)于this.fn(args);
}, delay);
};
}
// 將寫好的方法拋出
module.exports = {
throttle,
debounce
}
?使用的文件 home.wxml（
路徑：pages/home/home.wxml）
<button bindtap="formSubmit">點(diǎn)擊觸發(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ù)實(shí)現(xiàn)效果
可以看到我們從一開始就瘋狂點(diǎn)擊，但是都沒(méi)有觸發(fā)打印，只有我們停下來(lái)后，才會(huì)觸發(fā)最后一次點(diǎn)擊事件。
- 節(jié)流函數(shù)：
// 引入封裝文件
var util = require('../../utils/throttle');
Page({
data: {},
// 調(diào)用節(jié)流函數(shù)（首次點(diǎn)擊后觸發(fā)打印，3秒內(nèi)點(diǎn)擊按鈕都不會(huì)觸發(fā)，3秒后再次點(diǎn)擊觸發(fā)）
formSubmit: util.throttle(function (e) {
console.log('節(jié)流函數(shù)');
}, 3000),
})
節(jié)流函數(shù)實(shí)現(xiàn)效果
可以看到在我們第一次點(diǎn)擊事件后，觸發(fā)了打印，但當(dāng)我們?cè)?秒內(nèi)又點(diǎn)擊了幾次都沒(méi)有觸發(fā)打印，3秒后再次點(diǎn)擊才會(huì)觸發(fā)。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-824211.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-824211.html
到了這里，關(guān)于微信小程序全局封裝防抖節(jié)流函數(shù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
