二者区别: 函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流技术来实现。
一、防抖
原理:将几次操作合并为一此操作进行。原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发
/**
* 防抖函数
* @param {需要执行的函数} func
* @param {延迟时间} wait
* @param {是否立即执行} immediate
*/
function debounce(func, wait, immediate) {
var timer;
immediate = immediate || false;
return function() {
var that = this,
args = arguments;
if (immediate && !timer) {
func.apply(that, args);
}
if(timer){ clearTimeout(timer)};
timer = setTimeout(function() {
func.apply(that, args);
}, wait);
};
}
一、节流
原理:使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。
// 节流throttle代码(时间戳+定时器,立即执行加最后一次触发事件后也还会执行一次事件处理函数):
/**
* 节流函数
* @param {需要执行的函数} func
* @param {执行间隔时间} delay
*/
function throttle(func, delay) {
var timer = null;
var startTime = Date.now();//绑定时的时间
return function() {
var curTime = Date.now(); //滚动时的时间
var remaining = delay - (curTime - startTime);
//因为是高频触发,这里认为startTime必定大于curTime,且差值必定大于delay
//如果你非要在网页加载delay毫秒以内就去滚动网页的话,我也没办法
var context = this;
var args = arguments;
clearTimeout(timer);
if (remaining <= 0) {
func.apply(context, args);
startTime = Date.now();
} else {
timer = setTimeout(func, remaining);
}
}
}