javascript - 如何为 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，通过它您可以取消超时。您将需要使用这两个功能:

# 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

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

<小时/>

旁注:

这在本地开发时效果很好，但它不会涵盖一些现实世界的场景。

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

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