在实现实时搜索功能时，通常会使用输入框的事件监听器来捕获用户的输入变化，并在输入变化时发送搜索请求。为了避免过多的请求导致服务器负担过重，通常会使用“防抖”（debounce）技术来控制请求的频率。

-

实现步骤

    +

    实现步骤

    +
    1. 监听输入框的变化：使用input事件监听器来捕获用户的输入变化。
    2. 防抖处理：使用防抖函数来限制请求的频率。防抖函数会在用户停止输入一段时间后才发送请求。
    3. 发送请求：在防抖函数中调用搜索请求。
    -

    防抖函数示例

    以下是一个简单的防抖函数示例：

    +

    防抖函数示例

    +

    以下是一个简单的防抖函数示例：

    1
    2
    3
    4
    5
    6
    7
    8
    function debounce(func, wait) {
      let timeout;
      return function(...args) {
        const context = this;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), wait);
      };
    }
    - -

    实现实时搜索

    假设你有一个输入框用于搜索患者：

    +

    实现实时搜索

    +

    假设你有一个输入框用于搜索患者：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    <script>
      import { onMount } from 'svelte';
      import { patientsStore } from '$lib/stores/patients.svelte';

      let searchTerm = '';

      // 防抖函数
      function debounce(func, wait) {
        let timeout;
        return function(...args) {
          const context = this;
          clearTimeout(timeout);
          timeout = setTimeout(() => func.apply(context, args), wait);
        };
      }

      // 搜索函数
      const searchPatients = debounce(async (term) => {
        if (term) {
          // 发送搜索请求
          const response = await fetch(`/api/search-patients?query=${term}`);
          const data = await response.json();
          patientsStore.mbglPatients = data;
        } else {
          // 清空搜索结果或恢复默认数据
          patientsStore.mbglPatients = [];
        }
      }, 300); // 300ms 的防抖时间

      // 监听输入框变化
      function handleInput(event) {
        searchTerm = event.target.value;
        searchPatients(searchTerm);
      }
    </script>

    <input type="text" placeholder="搜索患者..." on:input={handleInput} bind:value={searchTerm} />
    - -

    请求发送间隔

      +

      请求发送间隔

      +
      • 防抖时间：通常设置为 300ms 到 500ms 之间。这个时间足够让用户完成输入并减少不必要的请求。
      • 考虑用户体验：防抖时间过短可能导致过多请求，过长则可能让用户感到延迟。300ms 是一个常用的折中值。
      -- cgit v1.2.3