如何为咖啡脚本搜索添加时间延迟

Question

当用户搜索姓氏时，响应是跳跃的。

这就是正在发生的事情。我的示例是搜索名称 Moon。

因为 Moon 是最具体的，所以它运行最快的搜索（例如 15.08） http://localhost:3000/contacts/search_contacts?search_term=Moon&order_by=first_name&sort_direction=asc&grade=all&group=allhttp://localhost:3000/contacts/search_contacts?

因为 M 是最不具体的，所以它运行最慢的搜索（例如 22.47） search_term=M&order_by=first_name&sort_direction=asc&grade=all&group=all http://localhost:3000/contacts/search_contacts?

Mo & Moo 也会跑。

因此，搜索找到了 Moon，但随后被“Moo”、“Mo”和“M”的搜索结果覆盖（并导致跳转和搜索无法正常工作）。

这里是代码（使用coffeescript）。

  class @ContactsSearch

  constructor: ->

    SearchUtils.configCheckBoxSelectAll('contacts-checkbox-select-all', 'contacts-container','contacts-delete-button')

    SearchUtils.configBtnGroup('contacts-btn-group-grade', doSearch)
    SearchUtils.configBtnGroup('contacts-btn-group-order-by', doSearch)
    SearchUtils.configBtnGroup('contact-btn-group', doSearch)
    SearchUtils.configSortDirBtn('contacts-sort-order-toggle', doSearch)

    configDeleteButton()
    configAjaxPaginationLinks()

    search_box = $('#contacts-search-input')
    search_box.data('search-url')
    search_box.bind 'input', (e, data) ->
      doSearch()


  doSearch = ->
    search_box = $('#contacts-search-input')

    btn_group_grade = $('#contacts-btn-group-grade')
    btn_group_order_by = $('#contacts-btn-group-order-by')
    sort_order_toggle = $('#contacts-sort-order-toggle')
    contact_btn_group = $('#contact-btn-group')

    SearchUtils.resetMasterCheckbox('contacts-checkbox-select-all', 'contacts-delete-button')

    ajaxCall(search_box.data('search-url') + "?search_term=" + search_box.val() + "&order_by=" + btn_group_order_by.data('value') + "&sort_direction=" + sort_order_toggle.data('value') + "&grade=" + btn_group_grade.data('value') + "&group=" + contact_btn_group.data('value'))

  ajaxCall = (finalUrl) ->
    search_box = $('#contacts-search-input')
    contacts_table = $('#contacts-container')
    $.ajax
      url: finalUrl
      type: "GET"
      error: (data, status, xhr) ->
        # do nothing
      success: (data, status, xhr) =>
        contacts_table.html(data)
        configAjaxPaginationLinks()
        $('[data-toggle="popover"]').popover()

        SearchUtils.configContainerCheckBoxs('contacts-checkbox-select-all', 'contacts-container','contacts-delete-button')


  configDeleteButton = ->
    $("#contacts-delete-button").click (event) ->
      event.preventDefault()
      bootbox.confirm "Are you sure?", (result) ->
        if result
          deleteSelectedContacts()

  configAjaxPaginationLinks = ->
    $('#contacts-container').find(".pagination a").click (event) ->
      event.preventDefault()
      search_box = $('#contacts-search-input')
      finalUrl = search_box.data('search-url') + "?" + $(this).attr("href").split("?").slice(1)
      ajaxCall(finalUrl)

  deleteSelectedContacts = ->
    url = $("#contacts-delete-button").data('url')

    deleteIDs = $(".contact-search-item:checked").map(->
      $(this).val()
    ).get()

    $.ajax
      url: url
      type: "POST"
      data: JSON.stringify({ ids: deleteIDs }),
      contentType: "application/json; charset=utf-8",
      dataType: "json"
      error: (data, status, xhr) ->
        # do nothing
      success: (data, status, xhr) =>
        doSearch()

document.addEventListener "turbolinks:load", ->
  new ContactsSearch()

我是 coffeescript 的新手，但我认为我需要改变逻辑。具体来说，我认为我需要为此添加一个时间延迟：

 search_box.bind 'input', (e, data) ->
      doSearch()

我尝试将“input”更改为“keyup”，以便在手指离开键盘时进行搜索，但这不起作用。不确定语法是否错误，或者这不是咖啡脚本约定。

或者，我认为我需要在 cofeescript 上添加某种时间延迟，但不确定语法？

有什么想法吗？
非常感谢。

Answer 1

您的评论是正确的，因为您需要消除输入的抖动。您只想在用户暂时停止输入时开始搜索。

最好的方法是通过setTimout。

setTimeout 将在 X 毫秒内调用一个方法。它还返回一个 id，您可以通过它取消超时。您将需要同时使用这两个功能：

# We want to wait for the user to stop typing for 1 second
SEARCH_DELAY = 1000

# here we will save the timeout id so we can cancel the search early
#   if the user keeps on typing
searchTimeoutId = null


search_box.bind 'input', ->
  # First clear the old search timeout if it exists
  clearTimeout searchTimeoutId
  # Then set a new timeout to search the text box contents if the user
  #   doesn't continue typing within 1 second
  searchTimeoutId = setTimeout doSearch, SEARCH_DELAY

请询问您是否需要进一步解释。

---

旁注：

这在本地开发时可以正常工作，但它不会涵盖一些现实世界的场景。

假设用户正在输入moon landing，在moon 和landing 之间有1 秒的停顿，这意味着将向服务器发送两个单独的搜索。在本地这很好，他们应该以正确的顺序返回。但是由于中间有一个复杂的网络，因此无法保证顺序。

我建议您在每次查询时都发送一个时间戳。然后你可以检查你是否已经收到并呈现了一个更新的请求，并丢弃那些太慢的旧响应而不呈现它们。