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

how do I add time delay to coffeescript search

本文关键字:迟到 延迟 咖啡 脚本 搜索 时间 何添加 添加      更新时间:2023-09-26

当用户搜索一个姓氏时,响应是跳跃的

是这样的。我的例子是搜索名称Moon。

因为月亮是最具体的,它运行最快的搜索(例如15.08)http://localhost: 3000/联系人/search_contacts ? search_term = Moon& order_by = first_name& sort_direction = asc&等级= all&组= allhttp://localhost: 3000/联系人/search_contacts ?

因为M是最不具体的,所以它运行最慢的搜索(例如22.47)search_term = M& order_by = first_name& sort_direction = asc&等级= all&组=http://localhost: 3000/联系人/search_contacts ?

莫,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()

我是一个咖啡脚本的新手,但我认为我需要改变逻辑。具体来说,我认为我需要添加一个时间延迟:

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

我试着把'input'改成'keyup',让它在手指离开键盘时进行搜索,但这不起作用。不确定语法是否错误,或者这不是一个咖啡脚本约定。

或者,我认为我需要在咖啡脚本上添加某种时间延迟,但不确定语法?

任何想法?
多谢。

你的评论是正确的,因为你需要揭穿你的输入。您只希望在用户停止输入一段时间后才开始搜索。

最好的方法是通过settimeout。

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,在moonlanding之间暂停1秒,这意味着两个单独的搜索将被发送到服务器。局部情况下这是可以的,它们应该会以正确的顺序返回。但中间有一个复杂的网络,顺序就不能保证了。

我建议你在每个查询中发送一个时间戳。然后你可以检查你是否已经收到&

显示最近的请求,并删除那些太慢的旧响应。