函數(shù)節(jié)流
函數(shù)節(jié)流：一個函數(shù)執(zhí)行一次后延旧，只有大于設(shè)定的執(zhí)行周期后才會執(zhí)行第二次萌踱。有個需要頻繁觸發(fā)函數(shù)葵礼，出于優(yōu)化性能角度，在規(guī)定時間內(nèi)并鸵，只讓函數(shù)觸發(fā)的第一次生效鸳粉，后面不生效。
- 時間戳實(shí)現(xiàn)函數(shù)節(jié)流(第一次會觸發(fā),結(jié)尾不觸發(fā))
根據(jù)函數(shù)節(jié)流的原理能真，我們也可以不依賴 setTimeout實(shí)現(xiàn)函數(shù)節(jié)流赁严。
function throttle(fn, delay) {
// 記錄上一次函數(shù)觸發(fā)的時間
var lastTime = 0;
return function() {
// 記錄當(dāng)前函數(shù)觸發(fā)的時間
var nowTime = Date.now();
if (nowTime - lastTime > delay) {
// 修正this指向問題
fn.call(this);
// 同步時間
lastTime = nowTime;
}
}
}
測試代碼：
// test
function testThrottle(e, content) {
console.log(e, content);
}
var testThrottleFn = throttle(testThrottle, 1000); // 節(jié)流函數(shù)
document.onmousemove = function (e) {
testThrottleFn(e, 'throttle'); // 給節(jié)流函數(shù)傳參
}
- 定時器實(shí)現(xiàn)函數(shù)節(jié)流(第一次不會觸發(fā),最后那下會觸發(fā))
function throttle(fn, delay) {
var timer;
return function () {
var _this = this;
var args = arguments;
if (timer) {
return;
}
timer = setTimeout(function () {
fn.apply(_this, args);
timer = null; // 在delay后執(zhí)行完fn之后清空timer扰柠，此時timer為假粉铐，
throttle觸發(fā)可以進(jìn)入計時器
}, delay)
}
}
測試代碼：
function testThrottle(e, content) {
console.log(e, content);
}
var testThrottleFn = throttle(testThrottle, 2000); // 節(jié)流函數(shù)
document.onmousemove = function (e) {
testThrottleFn(e, 'throttle'); // 給節(jié)流函數(shù)傳參
}
