Question

我有一个简单的建议框或类似的提示框，但是根据用户的键入速度，它会两次获得结果。我想这是因为上一个ajax调用尚未完成。

我想我找到了问题here的答案，但是我真的不知道如何实现abort()函数来取消代码中的上一个调用。

class @Customer

  @find: (search_box) ->

    search = search_box.val()
    linked = if search_box.data('linked_list') then true else false
    list = $('#customers_search_list')
    list.empty()

    if search.length > 2

      $.ajax

        url: '/customers/find.json?search='+search

        beforeSend: ->
          search_box.addClass 'on_request'

        error: (error) ->
          Ui.live_notice i18n.user.error + ": \r\n "+error.errorThrown, 'error'

        success: (customers) ->
          for customer in customers
            list.append Customer.build_list_item customer, linked

        complete: ->
          search_box.removeClass 'on_request'

  @build_list_item: (customer, linked) ->

    [open_tag,close_tag] = ''
    [open_tag,close_tag] = ["<a href='/customers/#{customer.id}'>", "</a>"] if linked

    """
    <li>
      #{open_tag}
        <div class='names'>
          <div class='name'>#{customer.name}</div>
          <div class='fiscal_name'>#{customer.fiscal_name}</div>
        </div>
        <div class='code'>#{customer.code}</div>
      #{close_tag}
    </li>
    """

$(document).on "keyup", "input#customer_name_search", (el) =>
  Customer.find $(el.currentTarget)

Answer 1

当遇到此类问题时，我通常想通过在按键后等待50-100毫秒来查看是否有新的按键按下来限制请求，然后才发出请求。这样也可以节省服务器的负载。如果您想了解实现此问题的不同方法，请尝试使用谷歌搜索“请求节流javascript”。

避免在keyup输入ajax调用上重复结果；杀死以前的ajax调用

1 个答案: