防抖(Debounce)和節流(throttle)都是用來控制某個函數在一定時間內執行多少次的技巧,兩者相似而又不同。
防抖函數
防抖是指在一定時間內只執行一次事件,接下來我們看一下實例。
function debouce(hanlder, wait) {
var t = null;
return function () {
clearTimeout(t);
t = setTimeout(hanlder, wait);
}
}
function hanlder() {
console.log('scroll~~~~');
}
window.addEventListener('scroll', debouce(hanlder, 500));
debouce.gif
節流函數
節流函數,只允許一個函數在規定的時間內執行一次。同樣,我們現在來看一下實現方案:
var throttle = function (func, wait){
var timeout,
context,
args,
startTime = Date.parse(new Date());
return function(){
var curTime = Date.parse(new Date());
var remaining = wait - (curTime - startTime);
context = this;
args = arguments;
clearTimeout(timeout);
if(remaining <= 0){
func.apply(context, args);
startTime = Date.parse(new Date());
}else{
timeout = setTimeout(func, remaining);
}
}
};
柯里化函數
function curry(fn) {
let args = [];
return function result(...rest) {
if (rest.length === 0) {
return fn(args);
}
args.push(...rest);
return result;
}
}