7-2 举重若轻-使用闭包提效及防抖技术

汇报人：xxx时间：2026二号任务举重若轻——使用闭包提效及防抖技术任务说明01（1）实现博客内容的搜索功能。（2）使用防抖技术优化搜索功能和其他高频事件。（3）减少不必要的函数调用，提升页面响应速度和性能。二号任务任务说明知识准备0201闭包目录匿名函数02防抖技术031.闭包知识准备（1）闭包的概念闭包是指函数能够捕获并记住其定义时的作用域环境。即使函数在其词法（LexicalScope）作用域之外执行，它仍然能够访问定义时的外部变量。这种特性使得闭包在JavaScript中非常强大，尤其是在处理异步操作和封装数据时。【例2-1】基本闭包示例。为什么不直接调用outerFunction()，而是使用constclosureExample=outerFunction();

闭包的重要意义在于让函数能够“记住”并访问其定义时的作用域环境，即使函数在其词法作用域之外执行。如果直接调用outerFunction()，闭包的作用就无法体现，因为返回的innerFunction没有被保存。1.闭包知识准备（2）在函数内部访问外部函数中的变量在函数内部可以访问其外部函数中的变量，是闭包的核心特性之一。通过闭包，我们可以在函数内部访问和操作外部函数的变量，而不需要将这些变量暴露在全局作用域中。【例2-2】使用闭包封装计数器在这个例子中，count变量被封装在counter()函数内部，外部无法直接访问count，但通过闭包，increment()函数可以访问并修改count的值。这种特性使得闭包非常适合用于封装私有变量和实现数据隐藏。1.闭包知识准备（3）闭包的优势【例2-3】使用闭包实现数据隐藏2.匿名函数知识准备（1）匿名函数的定义匿名函数是指没有名称的函数，通常作为参数传递给其他函数，或者用于立即执行函数表达式（EImmediatelyInvokedFunctionExpression）。匿名函数在JavaScript中非常常见，特别是在处理回调函数时。【例2-4】匿名函数作为定时器回调。在这个例子中，setTimeout()函数的第一个参数是一个匿名函数，它将在1秒后执行。（2）匿名函数作为参数传递在JavaScript中，函数可以作为参数传递给其他函数，这种特性使得我们可以将行为（函数）作为数据传递，从而实现更灵活的代码设计。【例2-5】匿名函数作为参数传递。在这个例子中，function(){console.log('Thisisacallbackfunction');}是一个匿名函数。Greet()函数接收一个回调函数作为其参数，并在执行完主要逻辑后调用该回调函数。具体来说，这个匿名函数被作为回调函数传递给greet()函数，并在其内部被执行。3.防抖技术知识准备（1）原理①定义：防抖（Debounce）技术用于限制某个函数在短时间内多次触发时的执行次数。②目的：减少不必要的计算和资源消耗，适用于频繁触发的事件（如输入、滚动、窗口调整等）。（2）工作流程①触发事件时，启动一个定时器。②如果在定时器到期前事件再次触发，则重置定时器。③只有当事件停止触发一段时间后，定时器到期，回调函数才会执行。当事件触发时，不会立即执行回调函数，而是启动一个定时器；如果在定时器到期之前事件再次触发，定时器会被重置，回调函数的执行会被推迟；只有当事件停止触发一段时间后，定时器才会到期，回调函数才会被执行。这种机制可以有效减少频繁触发事件时的回调函数执行次数，从而优化性能。3.防抖技术知识准备（3）实现方式基本实现：防抖函数可以通过闭包和定时器来实现。每次事件触发时，清除之前的定时器并重新设置一个新的定时器。【例2-6】基本防抖函数的实现。在这个例子中，有如下几个要点。闭包的作用：timeoutId被封装在debounce()函数的闭包中，确保每次调用返回的函数都能访问和修改同一个timeoutId。定时器的管理：每次事件触发时，clearTimeout(timeoutId)会清除之前的定时器，防止回调函数被多次执行。setTimeout()会重新设置一个新的定时器，延迟执行回调函数。回调函数的执行：只有当事件停止触发超过delay时间（例如300毫秒）后，定时器才会到期，回调函数才会被执行。通过防抖技术，可以有效减少频繁触发事件的回调函数执行次数，从而优化性能。防抖的核心在于延迟执行、重置定时器、减少执行次数。任务实现03任务实现01实现防抖函数将防抖函数定义放在

<script>

标签顶部。02实现搜索功能在零号任务中已经添加id为searchInput的搜索输入框，需要具体实现监听searchInput的input事件。使用debouncedSearch()函数处理搜索逻辑，确保搜索操作不会过于频繁。在debouncedSearch()函数中，获取所有博客卡片（.blog-card），并根据输入的搜索词过滤显示内容。任务实现使用防抖技术优化搜索功能将搜索输入框的input事件处理函数包装在debo