目录
前言
函数防抖和函数节流:都是用来优化高频率执行的 JavaScript 代码的方法。
函数防抖(debounce):在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
函数节流(throttle):每隔一段时间,只执行一次函数。
一、函数防抖(debounce)——多次触发只执行最后一次
函数防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
举个栗子:
var timer;
function debounce(fn, delay) {
clearTimeout(timer);
timer = setTimeout(function(){
fn();
}, delay);
}
// 应用实例
function f(){
console.log('test');
}
document.onmousemove = () => {
debounce(f, 1000);
}
上面例子中,在document中鼠标移动的时候,会在最后一次触发onmousemove事件后的1秒之后,执行回调函数f。但这种写法存在弊端:只能在setTimeout的父级作用域中声明 timer 才能保证是同一个timer。
使用闭包优化上面的代码:
function debounce(fn, time){
var timer;
return function(){
var _this = this;
var args = arguments;
if(timer){
clearTimeout(timer);
}
timer = setTimeout(function(){
fn.apply(_this, args);// 用 apply 指向调用 shakeProof 方法的对象,相当于 _this.fn(args);
}, time);
}
}
// 应用实例
function f(event, content){
console.log([event, content]);
}
var testFn = debounce(f, 1000);// 将函数 f 变为防抖函数
document.onmousemove = function (e) {
var e = e || window.event;
testFn(e, 'test'); // 给防抖函数传参
}
采用 ES6 语法优化上述防抖代码:
export const debounce = (fn, delay) => {
let timer = null;
let that = this;
return (...args) => {
timer && clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(that, args);
}, delay);
}
}
【注意】
- 这里使用了 ES6 的箭头函数来做闭包,会产生一个隐藏的问题:匿名函数的执行环境通常具有全局性,因此 this 在非严格模式下默认指向 window 对象,这会导致我们拿不到出入的额外的参数。所以为了避免这个问题,我们依然使用 apply() 重新指定 this 为函数 debounce() 的作用域。
- 若往防抖函数中传递额外的参数,在使用的函数里直接传就行。(未完待续)
二、函数节流(throttle)——规定时间内只触发一次
函数节流:每隔一段时间,只执行一次函数。
函数节流的实现方案有 2 种:
- 使用定时器实现函数节流:可通过使用定时器,在操作的时候让函数延时执行,如果在这个时间内还在操作,则清除原来的定时器,再创建一个新的定时器执行。
- 使用时间戳实现函数节流:用时间戳来判断是否已到执行时间,记录上次执行的时间戳,然后每次触发事件执行回调,回调中判断当前时间戳距离上次执行时间戳的间隔是否已经达到时间差(Xms),如果是则执行,并更新上次执行的时间戳,如此循环。
1、使用定时器实现函数节流
function throttle(fn, delay) {
var timer;
return function () {
var _this = this;
var args = arguments;
if (timer) {
return;
}
timer = setTimeout(function () {
fn.apply(_this, args);
timer = null; // 在delay后执行完fn之后清空timer,此时timer为假,throttle触发可以进入计时器
}, delay)
}
}
// 应用实例
function f(e, content) {
console.log([e, content]);
}
var testFn = throttle(f, 1000); // 节流函数
document.onmousemove = function (e) {
testFn(e, 'test'); // 给节流函数传参
}
采用 ES6 语法优化节流代码:
export const throttle = (fn, delay) => {
let timer = null;
let that = this;
return (args) => {
if (timer) return;
timer = setTimeout(() => {
fn().apply(that, args);
timer = null;
}, delay);
}
}
2、使用时间戳实现函数节流
function throttle(fn, delay) {
var previous = 0;
// 使用闭包返回一个函数并且用到闭包函数外面的变量previous
return function() {
var _this = this;
var args = arguments;
var now = new Date();
if(now - previous > delay) {
fn.apply(_this, args);
previous = now;
}
}
}
// 应用实例
function f(e, content) {
console.log([e, content]);
}
var testFn = throttle(f, 1000); // 节流函数
document.onmousemove = function (e) {
testFn(e, 'test'); // 给节流函数传参
}
三、函数防抖与节流的比较
1、相同点
- 都可以通过使用 setTimeout 实现。
- 目的都是,降低回调执行频率。节省计算资源。
2、不同点
- 函数防抖,在一段连续操作结束后,处理回调,利用 clearTimeout 和 setTimeout 实现;
函数节流,在一段连续操作中,每一段时间只执行一次,频率较高的事件中使用来提高性能。 - 函数防抖,关注一定时间连续触发,只在最后执行一次;
函数节流,侧重于一段时间内只执行一次。
四、防抖与节流的应用场景
1、防抖的应用场景
- 搜索框搜索输入。只需用户最后一次输入完,再发送请求。
- 手机号、邮箱验证输入检测。
- 窗口大小Resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。
- 滚动加载。
- 登录、发短信等按钮避免用户点击太快,以致于发送了多次请求,需要防抖。
- 调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到位,就用到了防抖。
- 文本编辑器实时保存,当无任何更改操作一秒后进行保存。
- 输入框实 input。
2、节流的应用场景
- 滚动加载,加载更多或滚到底部监听。
- 谷歌搜索框,搜索联想功能。
- 高频点击提交,表单重复提交。
- 监听滚动事件,比如是否滑到底部自动加载更多,用 throttle 来判断。例如:懒加载。
- 浏览器播放事件,每个一秒计算一次进度信息等。
- 手机短信验证码。