1.防抖方法
let timeout = null;
/**
* 防抖原理:一定時(shí)間內(nèi)屁药,只有最后一次操作,再過wait毫秒后才執(zhí)行函數(shù)
*
* @param {Function} func 要執(zhí)行的回調(diào)函數(shù)
* @param {Number} wait 延時(shí)的時(shí)間
* @param {Boolean} immediate 是否立即執(zhí)行
* @return null
*/
function debounce(func, wait = 500, immediate = false) {
// 清除定時(shí)器
if (timeout !== null) clearTimeout(timeout);
// 立即執(zhí)行肚逸,此類情況一般用不到
if (immediate) {
var callNow = !timeout;
timeout = setTimeout(function() {
timeout = null;
}, wait);
if (callNow) typeof func === 'function' && func();
} else {
// 設(shè)置定時(shí)器,當(dāng)最后一次操作后,timeout不會再被清除,所以在延時(shí)wait毫秒后執(zhí)行func回調(diào)方法
timeout = setTimeout(function() {
typeof func === 'function' && func();
}, wait);
}
}
2.節(jié)流方法
let timer, flag;
/**
* 節(jié)流原理:在一定時(shí)間內(nèi)技健,只能觸發(fā)一次
*
* @param {Function} func 要執(zhí)行的回調(diào)函數(shù)
* @param {Number} wait 延時(shí)的時(shí)間
* @param {Boolean} immediate 是否立即執(zhí)行
* @return null
*/
function throttle(func, wait = 500, immediate = true) {
if (immediate) {
if (!flag) {
flag = true;
// 如果是立即執(zhí)行,則在wait毫秒內(nèi)開始時(shí)執(zhí)行
typeof func === 'function' && func();
timer = setTimeout(() => {
flag = false;
}, wait);
}
} else {
if (!flag) {
flag = true
// 如果是非立即執(zhí)行惰拱,則在wait毫秒內(nèi)的結(jié)束處執(zhí)行
timer = setTimeout(() => {
flag = false
typeof func === 'function' && func();
}, wait);
}
}
};