如何在coffeescript搜索中添加时间延迟

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”，以便每当手指离开键盘时都进行搜索，但这没有用。 不知道语法是否错误，或者这是否不是coffeescript约定。

另外，我想我需要在cofeescript上添加某种类型的时间延迟，但是不确定语法吗？

有任何想法吗？
非常感谢。

Answer 1

您的评论是正确的，因为您需要取消输入的内容。 您只想在用户停止输入一会后才开始搜索。

最好的方法是通过setTimout 。

setTimeout将在X毫秒内调用一个方法。 它还返回一个ID，您可以通过该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秒钟的暂停，这意味着将向服务器发送两个单独的搜索。 在本地这很好，他们应该以正确的顺序回来。 但是，由于两者之间存在复杂的网络，因此无法保证顺序。

我建议您将时间戳记与每个查询一起发送。 然后，您可以检查是否已经收到并呈现了一个较新的请求，并丢弃了过于缓慢的旧响应而没有呈现它们。