网站建设的资金问题,德州建设银行兑换网站,南宁网站建设哪家公司好,湖北省疾病预防控制中心当你将一个新应用推向生产环境时#xff0c;你希望确保它用户友好。网站的性能是用户体验的关键部分。每个用户都希望网站及其内容能够快速加载。每一秒都是宝贵的#xff0c;可能导致用户再也不会访问你的网站。
在本指南中#xff0c;我们将了解JavaScript中一个非常重要…当你将一个新应用推向生产环境时你希望确保它用户友好。网站的性能是用户体验的关键部分。每个用户都希望网站及其内容能够快速加载。每一秒都是宝贵的可能导致用户再也不会访问你的网站。
在本指南中我们将了解JavaScript中一个非常重要的技术即防抖函数。然后我将向您展示如何在React中使用防抖实现自动完成功能。
本文内容参考java567.com
目录
什么是防抖函数如何在JavaScript中实现防抖防抖函数的用例结论
什么是防抖函数
防抖是一种通过控制函数执行的时间来改善功能性能的策略。
防抖接受一个函数并将其转换为更新后防抖的函数以便在一定时间后执行原始函数中的代码。
如果在该时间段内再次调用防抖函数则会重置先前的计时器并为此函数调用启动一个新的计时器。这个过程对每个函数调用都会重复。
一个例子会让你更好地理解。让我们拿一个函数fun()来说。我们希望在500毫秒后执行这个函数。
function fun() {console.log(This is a function)
}经过防抖处理后会返回一个新的函数debouncedFun()。现在每当你调用debouncedFun()时它都会在500毫秒后执行。
如果你在第一次调用后的500毫秒内再次调用它先前的计时器会被重置并为第二次函数调用启动一个新的计时器。如果你在500毫秒内保持调用函数这个过程会重复。
如何在JavaScript中实现防抖
让我们了解如何在JavaScript中实现防抖。首先我们将讨论我们的需求。我们希望防抖函数的行为是什么
延迟一定时间执行函数。如果再次调用函数则重置计时器。
为了防抖一个函数我们将有一个单独的函数它接受函数引用和延迟作为参数并返回一个防抖函数。
function debounce(func, delay) {return () {} // 返回防抖函数
}这个函数只会被调用一次以返回一个防抖函数并且这个防抖函数将在后续的代码中使用。
要延迟一段时间执行函数我们可以简单地在JavaScript中使用setTimeout函数。
function debounce(func, delay) {return () {setTimeout(() {func()}, delay)}
}这会将函数调用延迟delay毫秒。但是这还不完整因为它只满足了第一个要求。我们如何实现第二个行为呢
让我们创建一个变量timeout并将其赋值为setTimeout方法的返回值。setTimeout方法返回一个唯一的标识符给timeout这个标识符由timeout变量持有。
function debounce(func, delay) {let timeoutnullreturn () {timeoutsetTimeout(() {func()}, delay)}
}每次你调用setTimeout时ID都是不同的。我们将使用这个timeout变量来重置计时器。
但是我们如何从debounce()方法外部访问timeout呢如前所述debounce()方法只被调用一次来返回一个防抖函数。这个防抖函数再执行防抖逻辑。
那么即使在debounce()函数之外使用debounced函数它是如何访问timeout的呢好吧它使用了一个叫做闭包的概念。
JavaScript中的闭包是什么
在JavaScript中内部函数始终可以访问外部函数的局部变量。在我们的例子中内部函数可以访问在debounce()方法中具有函数级作用域的timeout变量。
但是当外部函数返回这个内部函数时即使外部函数已经执行完毕内部函数仍然持有对外部函数局部变量的引用。这就是闭包的概念。
让我们用一个例子来理解闭包。
function outerFunction() {const x 5;return () {console.log(x);}
}const inner outerFunction();inner(); // 输出5// console.log(x) 抛出引用错误在这里如果我们调用inner()代码将没有错误并且打印5。但是如果我们试图直接访问xJavaScript将抛出一个引用错误。 在JavaScript中引用错误
在这里inner()封闭了x只有这个函数可以使用这个变量其他的函数无法访问它。
回到防抖函数
让我们回到我们离开的地方
function debounce(func, delay) {let timeoutnullreturn () {timeoutsetTimeout(() {func()}, delay)}
}在这里JavaScript使用闭包来在每次使用防抖函数时都保持对timeout的访问。
让我们利用这一点。由于debouncedFun()在每次函数调用中都可以访问相同的timeout变量我们可以添加一个条件来检查先前的计时器是否存在。我们可以使用一个空值检查来实现这一点if(timeout ! null)或if(timeout)。
然后我们使用clearTimeout()方法来取消上一个计时器从而重置计时器。
在启动新的计时器之前添加以下语句
if(timeout) clearTimeout(timeout)计时器被重置后为当前函数调用启动一个新的计时器并将其ID分配给timeout。对于由于闭包而访问相同timeout的后续函数调用这个过程会重复。
function debounce(func, delay) {let timeoutnullreturn () {if(timeout) clearTimeout(timeout)timeoutsetTimeout(() {func()}, delay)}
}通过这样做我们满足了我们的第二个要求 - 即重置计时器并启动新的计时器。现在是时候使用这个防抖函数了。
让我们将fun()传递给debounce()方法延迟500ms。
const debouncedFun debounce(fun, 500)debouncedFun()基本上是带有防抖行为的fun()。让我们以不同的时间间隔调用这个函数来测试我们的功能。
debouncedFun()setTimeout(debouncedFun, 300)setTimeout(debouncedFun, 900)第一个函数调用立即执行。另外两个分别在300ms和900ms后执行。你能猜到输出吗
代码打印出两次This is a function。让我们来理解为什么。在这里第一次调用后fun()被安排在500ms后执行。但第二次调用在300ms内这会重置计时器并启动一个新的计时器。
500ms已经过去fun()方法执行。然后在900ms时又发生了另一个函数调用。这会再次在500ms后执行fun()。
我们还应该做一点小小的改进。我们的逻辑没有考虑函数参数。让我们用带有参数的fun()来替换它。
function fun(a, b) {console.log(This is a function with arguments ${a} and ${b})
}为了在防抖时包含参数返回一个接受参数的防抖函数。
function debounce(func, delay) {let timeoutnullreturn (...args) {if(timeout) clearTimeout(timeout)timeoutsetTimeout(() {func(...args)timeoutnull}, delay)}
}通过使用展开运算符传递给防抖函数的任何参数都将存储在args变量中的数组中。然后使用相同的args数组展开调用实际函数。
const debouncedFundebounce(fun, 500)
debouncedFun(2,3)上面的代码在500毫秒后打印出This is a function with arguments 2 and 3。
防抖函数的用例
让我们看看防抖在实际应用中是如何使用的。防抖最常见的用例是自动完成功能。你一定见过很多网站在输入框中输入内容时它会显示一个结果列表。
这里有一个来自Google搜索的例子 Google搜索在输入Top 10后的自动完成功能
Google搜索显示最近和常见的搜索项。这些信息主要来自浏览器缓存。但是一些网站会向后端服务器发出API调用从数据库中获取数据。
通过在输入元素上添加一个onchange事件并在事件处理程序中实现fetch逻辑可以很容易地实现这一点。但这里有一个小问题。
考虑以下例子 每次输入值都会进行API请求
当我输入单词absolute时每次输入字段的值更改都会进行一次API请求。在很短的时间内我们进行了8次API请求这会给后端服务器造成很大的负载并可能导致性能问题。
理想情况下我们希望在用户完成输入后一段时间内显示自动完成功能的结果。在这里用户一次性输入了absolute所以我们不需要在每次输入更改时都显示结果而是在用户完成输入后显示结果 - 也就是说在输入更改和结果显示之间添加一些延迟。
所以我们只有在用户完成输入时才进行API调用而不是在每次输入更改时都调用。这减少了API调用的数量并提高了性能。我们可以使用防抖来实现这种行为。
让我们了解如何在React中实现自动完成功能。
自动完成功能示例
使用create-react-app或像Vite这样的现代构建工具创建项目。删除现有的样板代码。不需要安装额外的依赖项。运行npm start命令启动项目。您可以在GitHub上找到完整的代码。
我已经设置了一个Node服务器来为应用程序获取数据。您可以在Git存储库中找到它。运行node server命令来启动它。我不打算展示Node.js代码因为它超出了本教程的范围。
让我们开始实现。我们将编写一个简单的自动完成功能。该应用程序应该显示一个包含用户输入字符串的城市
列表。
应用程序组件
我们首先需要一个输入元素来接受用户输入以及一个用于搜索结果的结果容器。将一个异步函数作为事件处理程序附加到输入元素上。
function App() {const [data, setData] useState(null)const loadData async (event) {}return (div classNameAppinput typetext onChange{(e) loadData(e)}/{data data.length ! 0 div classNameresults-container{data.map(item (div key{item.id} classNameresult-itemp {item.city} /p/div))}/div}/div);
}数据将存储为状态并且只有在数据非空时才会显示结果。我会跳过本教程的CSS你可以在Git Repo中找到它。
事件处理程序
loadData()函数获取我们的数据并将响应存储为状态。
const loadData async (event) {const valueevent.target.valueif(value ) {setData(null)return}const responseawait fetch(http://localhost:8000/data/${value})const resawait response.json()setData(res)
}如果没有输入值简单地退出函数。否则对节点服务器端点进行请求。由于此函数在每次输入更改时都会被调用因此我们将对该函数进行防抖。
使用自定义钩子实现防抖
我们将在一个自定义钩子中编写防抖逻辑。自定义钩子的优点是您可以在整个应用程序中重用相同的逻辑。强烈建议您这样做。
创建一个新文件夹custom-hooks在其中创建一个名为useDebounce.js的文件。如前所述useDebounce()方法应该接受一个函数和延迟作为参数并返回防抖函数。
const useDebounce (func, delay) {let timeoutnullreturn (...args) {if(timeout) clearTimeout(timeout)timeoutsetTimeout(() {func(...args)}, delay)}
}export default useDebounce现在在应用程序组件内部调用此方法一次以获取loadDataDebounced()。
const loadDataDebounced useDebounce(loadData, 400)我们将使用这个新方法作为输入元素的事件处理程序。
input typetext onChange{(e) loadDataDebounced(e)}/输出
在输入元素内输入搜索字符串以测试我们的代码。 屏幕上的输出 正如你在网络选项卡中看到的只发送了一个请求而不是三个。这使得搜索性能得到了很大的改善。
结论
在本教程中您了解了什么是防抖以及如何实现它。防抖通过延迟一定时间来执行函数并在函数再次调用时重置前一个计时器来延迟函数执行。
防抖使用了一个重要的概念 - 闭包。我稍微偏离了实现来解释闭包是什么。这对于初学者来说可能是一个令人困惑的概念所以请花些时间来理解它。闭包允许您在函数执行完毕后继续使用局部变量。
之后我向您展示了防抖的一个常见用例 - 自动完成功能。通过防抖可以提高功能的性能。我还向您展示了如何在React中实现自动完成功能并使用自定义钩子来实现防抖。希望这对您未来的项目有所帮助。
本文内容参考java567.com
