deploy: 9665097f0fa0dae9f92123fac54d26c0818758a5

1 files changed, 8 insertions, 6 deletions

diff --git a/2025/02/10/实时搜索中的防抖函数/index.html b/2025/02/10/实时搜索中的防抖函数/index.html
index 4f9ecd38..2390de3e 100644
--- a/2025/02/10/实时搜索中的防抖函数/index.html
+++ b/2025/02/10/实时搜索中的防抖函数/index.html
@@ -193,18 +193,20 @@
 </div>
     <div class="post-content">
     <p>在实现实时搜索功能时，通常会使用输入框的事件监听器来捕获用户的输入变化，并在输入变化时发送搜索请求。为了避免过多的请求导致服务器负担过重，通常会使用“防抖”（debounce）技术来控制请求的频率。</p>
-<h3 id="实现步骤"><a href="#实现步骤" class="headerlink" title="实现步骤"></a>实现步骤</h3><ol>
+<h3 id="实现步骤"><a class="header-anchor" href="#实现步骤">¶</a>实现步骤</h3>
+<ol>
 <li>监听输入框的变化：使用<code>input</code>事件监听器来捕获用户的输入变化。</li>
 <li>防抖处理：使用防抖函数来限制请求的频率。防抖函数会在用户停止输入一段时间后才发送请求。</li>
 <li>发送请求：在防抖函数中调用搜索请求。</li>
 </ol>
-<h3 id="防抖函数示例"><a href="#防抖函数示例" class="headerlink" title="防抖函数示例"></a>防抖函数示例</h3><p>以下是一个简单的防抖函数示例：</p>
+<h3 id="防抖函数示例"><a class="header-anchor" href="#防抖函数示例">¶</a>防抖函数示例</h3>
+<p>以下是一个简单的防抖函数示例：</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">debounce</span>(<span class="params">func, wait</span>) &#123;</span><br><span class="line">  <span class="keyword">let</span> timeout;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">function</span>(<span class="params">...args</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> context = <span class="variable language_">this</span>;</span><br><span class="line">    <span class="built_in">clearTimeout</span>(timeout);</span><br><span class="line">    timeout = <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> func.<span class="title function_">apply</span>(context, args), wait);</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
-
-<h3 id="实现实时搜索"><a href="#实现实时搜索" class="headerlink" title="实现实时搜索"></a>实现实时搜索</h3><p>假设你有一个输入框用于搜索患者：</p>
+<h3 id="实现实时搜索"><a class="header-anchor" href="#实现实时搜索">¶</a>实现实时搜索</h3>
+<p>假设你有一个输入框用于搜索患者：</p>
 <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">  import &#123; onMount &#125; from &#x27;svelte&#x27;;</span><br><span class="line">  import &#123; patientsStore &#125; from &#x27;$lib/stores/patients.svelte&#x27;;</span><br><span class="line"></span><br><span class="line">  let searchTerm = &#x27;&#x27;;</span><br><span class="line"></span><br><span class="line">  // 防抖函数</span><br><span class="line">  function debounce(func, wait) &#123;</span><br><span class="line">    let timeout;</span><br><span class="line">    return function(...args) &#123;</span><br><span class="line">      const context = this;</span><br><span class="line">      clearTimeout(timeout);</span><br><span class="line">      timeout = setTimeout(() =&gt; func.apply(context, args), wait);</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  // 搜索函数</span><br><span class="line">  const searchPatients = debounce(async (term) =&gt; &#123;</span><br><span class="line">    if (term) &#123;</span><br><span class="line">      // 发送搜索请求</span><br><span class="line">      const response = await fetch(`/api/search-patients?query=$&#123;term&#125;`);</span><br><span class="line">      const data = await response.json();</span><br><span class="line">      patientsStore.mbglPatients = data;</span><br><span class="line">    &#125; else &#123;</span><br><span class="line">      // 清空搜索结果或恢复默认数据</span><br><span class="line">      patientsStore.mbglPatients = [];</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;, 300); // 300ms 的防抖时间</span><br><span class="line"></span><br><span class="line">  // 监听输入框变化</span><br><span class="line">  function handleInput(event) &#123;</span><br><span class="line">    searchTerm = event.target.value;</span><br><span class="line">    searchPatients(searchTerm);</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;input type=&quot;text&quot; placeholder=&quot;搜索患者...&quot; on:input=&#123;handleInput&#125; bind:value=&#123;searchTerm&#125; /&gt;</span><br></pre></td></tr></table></figure>
-
-<h3 id="请求发送间隔"><a href="#请求发送间隔" class="headerlink" title="请求发送间隔"></a>请求发送间隔</h3><ul>
+<h3 id="请求发送间隔"><a class="header-anchor" href="#请求发送间隔">¶</a>请求发送间隔</h3>
+<ul>
 <li>防抖时间：通常设置为 300ms 到 500ms 之间。这个时间足够让用户完成输入并减少不必要的请求。</li>
 <li>考虑用户体验：防抖时间过短可能导致过多请求，过长则可能让用户感到延迟。300ms 是一个常用的折中值。</li>
 </ul>