函数防抖和节流
防抖
防抖和节流的作用都是防止函数多次调用。区别在于,假设一个用户一直触发这个函数,且每次触发函数的间隔小于wait,防抖的情况下只会调用一次,而节流的 情况会每隔一定时间(参数wait)调用函数。
function debouce(func,delay,immediate){ var timer = null; return function(){ var context = this; var args = arguments; if(timer) clearTimeout(timer); if(immediate){ //根据距离上次触发操作的时间是否到达delay来决定是否要现在执行函数 var doNow = !timer; //每一次都重新设置timer,就是要保证每一次执行的至少delay秒后才可以执行 timer = setTimeout(function(){ timer = null; },delay); //立即执行 if(doNow){ func.apply(context,args); } }else{ timer = setTimeout(function(){ func.apply(context,args); },delay); } } }
节流
防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。
var throttle = function(func,delay){ var timer = null; var startTime = Date.now(); return function(){ var curTime = Date.now(); var remaining = delay-(curTime-startTime); var context = this; var args = arguments; clearTimeout(timer); if(remaining<=0){ func.apply(context,args); startTime = Date.now(); }else{ timer = setTimeout(func,remaining); } } }