函數(shù)防抖
函數(shù)防抖(debounce):當(dāng)持續(xù)觸發(fā)事件時(shí),一定時(shí)間段內(nèi)沒(méi)有再觸發(fā)事件茶鹃,事件處理函數(shù)才會(huì)執(zhí)行一次,如果設(shè)定的時(shí)間到來(lái)之前艰亮,又一次觸發(fā)了事件闭翩,就重新開(kāi)始延時(shí)。
函數(shù)節(jié)流
函數(shù)節(jié)流(throttle):當(dāng)持續(xù)觸發(fā)事件時(shí)迄埃,保證一定時(shí)間段內(nèi)只調(diào)用一次事件處理函數(shù)疗韵。
主要用于頻繁操作dom產(chǎn)生的事件,如:滾動(dòng)事件侄非,拖拽事件蕉汪,窗口縮放等等
防抖:
function debounce(fn, delay) {
let timer = null;
return function() {
// 通過(guò) ‘this’ 和 ‘a(chǎn)rguments’ 獲取函數(shù)的作用域和變量
let context = this;
let args = arguments;
// 清理掉正在執(zhí)行的函數(shù),并重新執(zhí)行
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(context, args);
}, delay);
}
}
function scroll() {
console.log(1111)
}
document.body.addEventListener('scroll', debounce(scroll, 1000));
節(jié)流
//以時(shí)間戳的形式或者定時(shí)器逞怨,都可以
var throttle = function(func, delay) {
var prev = Date.now();
return function() {
var context = this;
var args = arguments;
var now = Date.now();
if (now - prev >= delay) {
func.apply(context, args);
prev = Date.now();
}
}
}
function scroll() {
console.log(111);
}
window.addEventListener('scroll', throttle(scroll, 1000));