防抖(Debounce)原理:
在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。(不停的触发事件,只执行最后一次 ===> 指的是某个函数在某段时间内,无论触发了多少次回调,都只执行最后一次。假如我们设置了一个等待时间 3 秒的函数,在这 3 秒内如果遇到函数调用请求就重新计时 3 秒,直至新的 3 秒内没有函数调用请求,此时执行函数,不然就以此类推重新计时。)
防抖应用场景:
- 输入框输入事件,只在用户停止输入一段时间后才执行搜索操作。
- 窗口大小变化事件,只在用户停止调整窗口大小一段时间后才执行相应操作。
- 防止多次提交按钮,只执行最后提交的一次
节流(Throttle)原理:
规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。(函数节流指的是某个函数在一定时间间隔内(例如 3 秒)只执行一次,在这 3 秒内 无视后来产生的函数调用请求,也不会延长时间间隔。)
节流应用场景:
- 滚动事件,限制在滚动过程中只触发一次函数,减少触发次数。
- 鼠标移动事件,限制在一定时间内只执行一次函数,减少函数的执行频率。
- 拖拽场景:固定时间内只执行一次,防止超高频次触发位置变动
- 缩放场景:监控浏览器resize
防抖和节流的区别:
-
防抖:在n秒时间内,不停的被触发,只执行最后一次
-
节流:在n秒时间内,不停的被触发,只执行第一次
JavaScript 实现防抖和节流:
防抖实现:
简易版实现
function debounce(func, wait) {
let timeout;
return function () {
const context = this;
const args = arguments;
clearTimeout(timeout)
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
// 示例用法
const debouncedFn = debounce(() => {
console.log('Debounced function executed');
}, 300);
// 调用防抖函数
debouncedFn();
立即执行版实现(有时希望立刻执行函数,然后等到停止触发 n 秒后,才可以重新触发执行。)
// 有时希望立刻执行函数,然后等到停止触发 n 秒后,才可以重新触发执行。
function debounce(func, wait, immediate) {
let timeout;
return function () {
const context = this;
const args = arguments;
if (timeout) clearTimeout(timeout);
if (immediate) {
const callNow = !timeout;
timeout = setTimeout(function () {
timeout = null;
}, wait)
if (callNow) func.apply(context, args)
} else {
timeout = setTimeout(function () {
func.apply(context, args)
}, wait);
}
}
}
返回值版实现(func函数可能会有返回值,所以需要返回函数结果,但是当 immediate 为 false 的时候,因为使用了 setTimeout ,我们将 func.apply(context, args) 的返回值赋给变量,最后再 return 的时候,值将会一直是 undefined,所以只在 immediate 为 true 的时候返回函数的执行结果。)
function debounce(func, wait, immediate) {
let timeout, result;
return function () {
const context = this;
const args = arguments;
if (timeout) clearTimeout(timeout);
if (immediate) {
const callNow = !timeout;
timeout = setTimeout(function () {
timeout = null;
}, wait)
if (callNow) result = func.apply(context, args)
}
else {
timeout = setTimeout(function () {
func.apply(context, args)
}, wait);
}
return result;
}
}
节流实现:
使用时间戳实现(使用时间戳,当触发事件的时候,我们取出当前的时间戳,然后减去之前的时间戳(最一开始值设为 0 ),如果大于设置的时间周期,就执行函数,然后更新时间戳为当前的时间戳,如果小于,就不执行。)
function throttle(fn, wait = 500, immediate = false) {
let timer = null, startTime = Date.now(), result = null;
return function (...args) {
if(immediate) result = fn.apply(this, args);
const now = Date.now();
// 超过了延时时间,马上执行
if(now - startTime > wait) {
// 更新开始时间
startTime = Date.now();
result = fn.apply(this, args);
}else {
// 否则定时指定时间后执行
if(timer) clearTimeout(timer);
timer = setTimeout(() => {
// 更新开始时间
startTime = Date.now();
fn.apply(this, args);
}, wait);
}
}
}
// 示例用法
const throttledFn = throttle(() => {
console.log('Throttled function executed');
}, 300);
// 调用节流函数
throttledFn();
使用定时器实现(当触发事件的时候,我们设置一个定时器,再触发事件的时候,如果定时器存在,就不执行,直到定时器执行,然后执行函数,清空定时器,这样就可以设置下个定时器。)
function throttle(func, wait) {
let timeout;
return function () {
const context = this;
const args = arguments;
if (!timeout) {
timeout = setTimeout(function () {
timeout = null;
func.apply(context, args)
}, wait)
}
}
}