防抖(debounce)
所谓防抖,是指触发某一个事件后,在n秒内函数只能执行一次,如果在n秒内再一次触发了事件,则会重新计算函数的执行时间
防抖函数分为非立即执行函数和立即执行函数。
<!-- 接下来所有的防抖函数的测试皆由此html测试 -->
<span id="count">当前数字为:0</span>
<button id="debounceBtn"> debounce防抖按钮 </button>
非立即执行函数
非立即执行版的防抖函数是指在触发时间后并不会立即执行,而是在n秒后第一次执行,再一次在n秒内触发这个事件,则会重新的计算函数的执行时间。
/**
* @param func 函数
* @param wait 延时执行时间
*/
function debounce(func, wait) {
let timeout;
return function() {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
}
}
编写测试js代码:
let debounceBtn = document.getElementById('debounceBtn');
let countSpan = document.getElementById('count');
let count = 0;
debounceBtn.onclick = debounce(function() {
count++;
countSpan.innerText = '当前数字为: ' + count;
}, 500);
运行结果:
立即执行版
立即执行版的防抖函数是指触发某一个事件时,会立即执行防抖函数,然后在n秒内再一次触发事件,会重新计算函数的执行时间。
/**
* @param func 函数
* @param wait 延时执行时间
*/
function debounce(func, wait) {
let timeout;
return function() {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
let callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait);
if (callNow) func.apply(context, args);
}
}
使用上面的测试方法,得到的效果如下:
在通常的开发过程中,我们一般都是通过不同的场景来决定使用哪一种的防抖函数。但为了避免多次的开发,反复的使用。为了懒也得把这两个来一个结合。然后,下面他就来了。
/**
* @param isImme 判断为哪一种执行方式; true: 立即执行 false: 非立即执行
* @param func 函数
* @param wait 延时执行时间
*/
function debounce(func, wait, isImme) {
let timeout;
return function() {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
if (isImme) {
let callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait);
if (callNow) func.apply(context, args);
} else {
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
}
}
}
节流(throttle)
所谓节流,是指连续触发事件但是在n秒中只执行一次函数。也就是说,节流可以稀释函数的执行频率。
节流也有两种实现的方法,一种是通过时间戳来控制,另一种是通过定时器来控制。
时间戳版
/**
* @param func 函数
* @param wait 延时执行时间
*/
function throttle(func, wait) {
let previous = 0;
return function() {
let now = Date.now();
let context = this;
let args = arguments;
if (now - previous > wait) {
func.apply(context, args);
previous = now;
}
}
}
使用方式如同防抖,下面则是节流的使用:
let debounceBtn = document.getElementById('debounceBtn');
let countSpan = document.getElementById('count');
let count = 0;
debounceBtn.onclick = throttle(function() {
count++;
countSpan.innerText = '当前数字为:' + count;
}, 500);
使用效果如下:
通过效果可以看到,在持续的触发事件的过程中,函数会立即执行,并且每500ms执行一次。
定时器版
/**
* @param func 函数
* @param wait 延时执行时间
*/
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);
}
}
}
使用方法同上,效果如下:
通过效果可以看到,在持续触发事件过程中,函数不会立即执行,并且每一秒执行一次,在停止触发后,函数再一次的执行。
在此,我们很容易发现,其实时间戳版和定时器版有明显的不同。而区别就在于:时间戳版的函数触发实在时间段内开始的时候,而定时器版的函数触发是在时间段内结束的时候。
在最后,就像防抖一样,我们也把节流的两种方法结合起来吧!
/**
* @param {Function} func 函数方法
* @param {Number} wait 延迟执行时间
* @param {Number} type 1:时间戳版 2:定时器版
*/
function throttle(func, wait, type) {
if (type == 1) {
let previous = 0;
} else if (type == 2) {
let 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);
})
}
}
}
}