如何在ScalaJS中为搜索输入实现请求延迟？

这个场景太常见了——用户输入时频繁触发请求不仅浪费资源，还容易出现你说的那种误匹配问题。我们可以用**防抖（Debounce）**来解决，核心思路就是：每次用户输入时，先取消之前待执行的请求定时器，重新设置一个延迟，只有当用户停止输入满指定时长（比如1000ms）后，才真正发送请求。

下面给你两种常见场景的实现方案：

一、原生ScalaJS DOM实现 #

如果你的应用直接操作DOM，代码可以这么写：

import org.scalajs.dom
import scala.scalajs.js

// 获取搜索输入框元素
val searchInput = dom.document.getElementById("city-search").asInstanceOf[dom.html.Input]

// 用来保存防抖定时器的ID，初始为无值
var debounceTimer: js.UndefOr[js.timers.SetTimeoutHandle] = js.undefined

// 输入事件处理函数
def handleSearchInput(event: dom.Event): Unit = {
  val query = searchInput.value.trim

  // 第一步：清除之前还没触发的定时器
  debounceTimer.foreach(js.timers.clearTimeout)

  // 如果输入为空，直接返回，避免无效请求
  if (query.isEmpty) {
    // 这里可以加清空搜索结果的逻辑
    return
  }

  // 第二步：设置新的1秒延迟定时器
  debounceTimer = js.timers.setTimeout(1000) {
    // 延迟结束后，执行实际的请求逻辑
    fetchCityData(query)
  }
}

// 绑定输入事件到输入框
searchInput.addEventListener("input", handleSearchInput)

// 模拟后端请求函数，你可以替换成自己的API调用
def fetchCityData(query: String): Unit = {
  dom.fetch(s"/api/search/cities?query=${dom.encodeURIComponent(query)}")
    .then(_.json())
    .then(cityData => {
      // 这里处理返回的城市数据，比如更新页面结果
      println(s"获取到城市数据：$cityData")
    })
    .catch(error => {
      println(s"请求出错：$error")
    })
}

二、ScalaJS React组件实现 #

如果你的项目用了Scalajs-React框架，可以把防抖逻辑封装到组件内部：

import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.html_<^._
import org.scalajs.dom
import scala.scalajs.js

object CitySearchComponent {
  // 组件状态：保存当前输入的搜索词
  case class State(searchQuery: String)

  class Backend($: BackendScope[Unit, State]) {
    // 保存防抖定时器ID
    var debounceTimer: js.UndefOr[js.timers.SetTimeoutHandle] = js.undefined

    // 输入变化处理函数
    def onInputChange(e: dom.Event): Callback = {
      val input = e.target.asInstanceOf[dom.html.Input]
      val newQuery = input.value.trim

      // 清除旧定时器 + 更新状态
      val clearTimer = Callback(debounceTimer.foreach(js.timers.clearTimeout))
      val updateState = $.modState(_.copy(searchQuery = newQuery))

      clearTimer >> updateState >> Callback {
        if (newQuery.nonEmpty) {
          // 设置新的1秒延迟定时器
          debounceTimer = js.timers.setTimeout(1000) {
            fetchCityData(newQuery).runNow()
          }
        }
      }
    }

    // 发送请求的逻辑
    def fetchCityData(query: String): Callback = Callback {
      dom.fetch(s"/api/search/cities?query=${dom.encodeURIComponent(query)}")
        .then(_.json())
        .then(data => {
          // 这里可以更新组件状态或者渲染结果列表
          println(s"搜索结果：$data")
        })
        .catch(err => println(s"请求失败：$err"))
    }

    // 组件卸载时清除定时器，避免内存泄漏
    override def componentWillUnmount(): Callback = Callback {
      debounceTimer.foreach(js.timers.clearTimeout)
    }

    // 渲染组件
    def render(state: State): VdomElement = {
      <.div(
        <.input(
          ^.`type` := "text",
          ^.placeholder := "输入城市名称...",
          ^.value := state.searchQuery,
          ^.onChange ==> onInputChange
        )
      )
    }
  }

  // 构建组件
  val component = ScalaComponent.builder[Unit]("CitySearch")
    .initialState(State(""))
    .renderBackend[Backend]
    .build

  def apply(): VdomElement = component()
}

关键逻辑说明 #

1. 定时器的重置：每次用户输入时，先清除之前的定时器，确保只有最后一次输入的延迟到期后才会发送请求。
2. 空输入处理：避免输入为空时发送无效请求，减少后端压力。
3. 内存泄漏防护：在组件卸载时清除定时器，防止无用的定时器继续占用资源。

这个方案完美解决了你说的问题——用户输入"paris"的过程中，只有当他停止输入满1秒后，才会发送请求搜索"paris"，而不会在输入到"par"时就触发请求。

内容的提问来源于stack exchange，提问作者Chris W