节流和防抖的目的都是防止某一时间频繁触发,但是原理不一样
函数防抖是某一段时间内只执行一次,而函数节流是间隔时间执行
防抖:
在事件被触发n秒后再进行回调,如果这期间又被触发,则重新计时
代码实现:
function debounce(fn, wait) {
var timeout = null;
return function() {
if(timeout !== null)
clearTimeout(timeout);
timeout = setTimeout(fn, wait);
}
}
应用:
function handle(){xxx}
window.addEventListener('scroll',debounce(handle,1000))
意思是监听scroll事件,事件处理函数handle只停止滚动1000ms以后才会执行一次,也就是说在持续触发scroll事件的过程中,事件处理函数handle一直没有执行
节流:
规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。一般利用时间戳+定时器来实现
function throttle(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);
}
}
}
应用场景:
debounce:
search搜索联想,用户不断输入时,用防抖来节约请求资源
window触发resize的时候,不断的调整浏览器窗口大小会不断触发这个事件,用防抖来让其只触发一次
throttle
鼠标不断点击触发,mousedown(单位事件内只触发一次)
监听滚动事件,比如是否滑到底部自动加载跟多