本文已参与「新人创作礼」活动, 一起开启掘金创作之路。
防抖和节流是 JavaScript 中常用的两种性能优化方式。面试中我们也会经常碰到。它们的作用是减少函数的执行次数,以提高代码的性能。本文将详细介绍防抖和节流的定义、原理和实现方法,并讨论如何在具体功能中使用它们。
防抖
防抖是指在一定时间内,多次触发同一事件,只执行最后一次,或者只在开始时执行一次。防抖的应用场景比较广泛,例如在用户输入搜索关键词时,可以使用防抖来避免频繁地向服务器发送请求。
下面是一个简单的防抖实现代码:
/**
* 防抖函数
* @param {Function} fn - 需要执行的函数
* @param {Number} delay - 时间延迟参数
* @return {Function} 返回一个新的函数
*/
function debounce(fn, delay) {
// 定义一个变量来保存定时器的返回值
let timer = null;
// 返回一个新的函数
return function() {
// 保存函数执行时的参数
const args = arguments;
// 如果已经存在定时器,则清除之前的定时器
if (timer) clearTimeout(timer);
// 创建一个新的定时器
timer = setTimeout(() => {
// 在延迟结束后执行传入的函数,并传入之前保存的参数
fn.apply(this, args);
}, delay);
}
}
在这段代码中,我们定义了一个 debounce
函数,它接受一个函数 fn
和一个时间延迟参数 delay
。返回一个新函数,在这个新函数中使用了闭包保存了原函数的 this
指向和 arguments
对象,以确保原函数在执行时能够正确地访问到它们。在延迟结束后执行原函数时,我们需要使用 apply
方法将保存的 this
指向传递给原函数,以确保它能够正确地访问到其所在的对象。
节流
节流是指在一定时间内,多次触发同一事件,只执行一次。节流的应用场景也比较广泛,例如在用户滚动页面时,可以使用节流来避免频繁地触发函数。
下面是一个简单的节流实现代码:
/**
* 节流函数
* @param {Function} fn - 需要执行的函数
* @param {Number} delay - 时间延迟参数
* @return {Function} 返回一个新的函数
*/
function throttle(fn, delay) {
// 定义一个变量来保存定时器的返回值
let timer = null;
// 返回一个新的函数
return function() {
// 保存函数执行时的参数
const args = arguments;
// 如果已经存在定时器,则直接返回
if (timer) return;
// 创建一个新的定时器
//fn.apply(this, args); //在延迟前执行传入的函数,并传入之前保存的参数
timer = setTimeout(() => {
// 在延迟结束后执行传入的函数,并传入之前保存的参数
fn.apply(this, args);
// 执行完毕后将定时器变量设置为 null,以便下一次调用函数
timer = null;
}, delay);
}
}
在这段代码中,我们定义了一个 throttle
函数,它接受一个函数 fn
和一个时间延迟参数 delay
。返回一个新函数,在这个新函数中使用了一个标记变量 timer
来判断是否需要执行原函数。在第一次调用原函数时,我们保存了其 this
指向和 arguments
对象,并且在计时器结束后执行原函数时,同样需要使用 apply
方法将保存的 this
指向传递给原函数,以确保它能够正确地访问到其所在的对象。
在具体功能中使用防抖和节流
防抖和节流的应用场景比较广泛,可以在很多具体功能中使用它们来提高代码的性能。例如:
- 在用户输入搜索关键词时,可以使用防抖来避免频繁地向服务器发送请求。
- 在用户滚动页面时,可以使用节流来避免频繁地触发函数。
- 在监听窗口大小改变时,可以使用节流来避免频繁地调整布局。
- 在监听鼠标移动时,可以使用节流来避免频繁地触发事件。
下面以一个搜索框的例子来演示如何在具体功能中使用防抖。
<input type="text" id="search-input">
const searchInput = document.getElementById('search-input');
function search(keyword) {
console.log(`search for ${keyword}`);
// 发送搜索请求
}
const debounceSearch = debounce(search, 500);
searchInput.addEventListener('input', event => {
debounceSearch(event.target.value);
});
在这个例子中,我们首先定义了一个 search
函数,它会接受一个关键词参数并发送搜索请求。然后,我们使用 debounce
函数创建了一个新函数 debounceSearch
,它会在输入框中输入内容时被调用,避免了频繁地向服务器发送请求。最后,我们通过 addEventListener
方法将这个新函数绑定到输入框的 input
事件上,以响应用户的输入。
类似地,我们也可以在其他具体功能中使用防抖和节流来提高代码的性能。只需要根据实际情况选择合适的函数和时间延迟参数即可。
结语
防抖和节流是 JavaScript 中常用的性能优化方式。它们的原理和实现方法都比较简单,但却能够显著提高代码的性能。在具体功能中使用防抖和节流也比较简单,只需要根据实际情况选择合适的函数和时间延迟参数即可。希望本文对大家有所帮助。