防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案。 在给DOM绑定事件时,有些事件我们是无法控制触发频率的。 如鼠标移动事件onmousemove, 滚动滚动条事件onscroll,窗口大小改变事件onresize,瞬间的操作都会导致这些事件会被高频触发。
针对此类快速连续触发和不可控的高频触发问题,防抖和节流给出了两种解决策略;
函数防抖
是指在事件被触发 n 秒后再执行回调,如果在这 n 秒内事件又被触发,则重新计时;简单说就是遇到延时函数的定时器,就重新计时。这可以使用在一些点击请求的事件上,避免因为用户的多次点击向后端发送多次请求。
防抖函数分为非立即执行版和立即执行版。
非立即执行版:
非立即执行版的意思是触发事件后函数不会立即执行,而是在 n 秒后执行,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
// 函数防抖的实现
//fn是用户传入需要防抖的函数
//wait是等待的时间
function debounce(fn, wait) {
var timer = null;
return function() {
var context = this,
args = arguments;
// 如果此时存在定时器的话,则取消之前的定时器重新记时
if (timer) {
clearTimeout(timer);
timer = null;
}
// 设置定时器,使事件间隔指定事件后执行
timer = setTimeout(() => {
fn.apply(context, args);
}, wait);
};
}
立即执行版:
立即执行版的意思是触发事件后函数会立即执行,然后 n 秒内不触发事件才能继续执行函数的效果。
function debounce(func,wait) {
let time;
return function () {
let context = this;
let args = arguments;
if (time) clearTimeout(time);
let callNow = !time;
time = setTimeout(() => {
time= null;
}, wait)
if (callNow) func.apply(context, args)
}
}
结合起来
//func函数
//wait 延迟执行毫秒数
//immediate true 表立即执行,false 表非立即执行
function debounce(func,wait,immediate) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
if (immediate) {
var callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait)
if (callNow) func.apply(context, args)
}else {
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
}
函数节流
是指规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。简单说就是有延时函数定时器,就不执行任何操作。节流可以使用在 scroll 函数的事件监听上,通过事件节流来降低事件调用的频率。
节流一般有两种方式可以实现,分别是时间戳版和定时器版。
时间戳版
在持续触发事件的过程中,函数会立即执行,并且每 1s 执行一次。
// 函数节流的实现;
function throttle(fn, delay) {
var preTime = Date.now();
return function() {
var context = this,
args = arguments,
nowTime = Date.now();
// 如果两次时间间隔超过了指定时间,则执行函数。
if (nowTime - preTime >= delay) {
preTime = Date.now();
return fn.apply(context, args);
}
};
}
定时器版
在持续触发事件的过程中,函数不会立即执行,并且每 1s 执行一次,在停止触发事件后,函数还会再执行一次。
function throttle(func, wait) {
let timeout;
return function() {
let context = this;
let args = arguments;
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(context, args)
}, wait)
}
}
}
时间戳版的函数触发是在时间段内开始的时候,而定时器版的函数触发是在时间段内结束的时候。
结合起来
//函数节流
//func 函数
//wait 延迟执行毫秒数
//type 1 表时间戳版,2 表定时器版
function throttle(func, wait ,type) {
if(type===1){
var previous = 0;
}else if(type===2){
var timeout;
}
return function() {
let context = this;
let args = arguments;
if(type===1){
let now = Date.now();
if (now - previous > wait) {
func.apply(context, args);
previous = now;
}
}else if(type===2){
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(context, args)
}, wait)
}
}
}
}
防抖是控制次数,节流是控制频率
防抖和节流各有特点,在不同 的场景要根据需求合理的选择策略。
如果事件触发是高频但是有停顿时,可以选择防抖;
在事件连续不断高频触发时,只能选择节流,因为防抖可能会导致动作只被执行一次,界面出现跳跃。