防抖（debounce）：一段時(shí)間之后才執(zhí)行某個(gè)函數(shù)
節(jié)流（throttle）：一段時(shí)間之內(nèi)執(zhí)行某個(gè)函數(shù)
防抖（debounce）： 主要是利用計(jì)時(shí)器實(shí)現(xiàn)搞隐；為了不污染全局變量讨越，利用閉包，共享一個(gè)計(jì)時(shí)器變量裤纹，返回一個(gè)新的函數(shù)
myPlugin.debounce = function (callback, time) {
var timer;
return function () {
clearTimeout(timer);//清除之前的計(jì)時(shí)
timer = setTimeout(function () {
callback();
}, time);
}
}
完善一下如果要傳入?yún)?shù)的情況
myPlugin.debounce = function (callback, time) {
var timer;
return function () {
clearTimeout(timer);//清除之前的計(jì)時(shí)
var args = arguments; //利用閉包保存參數(shù)數(shù)組
timer = setTimeout(function () {
callback.apply(null, args);
}, time);
}
}
如何使用
<script src="debounce的js路徑"></script>
<script>
var handle = myPlugin.debounce(function(width) {
console.log(width);
}, 1000);
window.onresize = function() {
handle(document.documentElement.clientWidth);
}
</script>
節(jié)流（throttle）： 節(jié)流有兩種做法委刘，一種是利用計(jì)時(shí)器，等某段時(shí)候之后才執(zhí)行并且在在段時(shí)間內(nèi)不回重新計(jì)時(shí)鹰椒；另外一種是利用時(shí)間戳锡移，該立即執(zhí)行，下一次執(zhí)行需要等待
第一種方法
myPlugin.throttle = function (callback, time) {
var timer;
return function () {
// 如果當(dāng)前有計(jì)時(shí)漆际，直接renturn
if (timer) {
return;
}
var args = arguments; //利用閉包保存參數(shù)數(shù)組
timer = setTimeout(function () {
callback.apply(null, args);
timer = null; //函數(shù)執(zhí)行完要立馬清空計(jì)時(shí)器淆珊，否則將無法進(jìn)行下一次執(zhí)行
}, time);
}
}
第二種方法
myPlugin.throttle = function (callback, time) {
var t;
return function () {
if (!t || Date.now() - t >= time) { //之前沒有計(jì)時(shí) 或 距離上次執(zhí)行的時(shí)間已超過規(guī)定的值
callback.apply(null, arguments);
t = Date.now(); //得到的當(dāng)前時(shí)間戳
}
}
}
所以我們可以統(tǒng)一一下
myPlugin.throttle = function (callback, time, immediately) {
if (immediately === undefined) {
immediately = true;
}
if (immediately) {
var t;
return function () {
if (immediately) {
if (!t || Date.now() - t >= time) { //之前沒有計(jì)時(shí) 或 距離上次執(zhí)行的時(shí)間已超過規(guī)定的值
callback.apply(null, arguments);
t = Date.now(); //得到的當(dāng)前時(shí)間戳
}
}
}
}
else {
var timer;
return function () {
// 如果當(dāng)前有計(jì)時(shí)，直接renturn
if (timer) {
return;
}
var args = arguments; //利用閉包保存參數(shù)數(shù)組
timer = setTimeout(function () {
callback.apply(null, args);
timer = null; //函數(shù)執(zhí)行完要立馬清空計(jì)時(shí)器奸汇，否則將無法進(jìn)行下一次執(zhí)行
}, time);
}
}
}
如何使用
<script>
function test() {
console.log("a");
}
var handle = myPlugin.throttle(test, 1000, false);
window.onresize = function(){
handle();
}
</script>
