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

【问题标题】：Avoid repeated results on a keyup input ajax call; kill previous ajax call避免 keyup 输入 ajax 调用的重复结果；杀死以前的ajax调用
【发布时间】：2019-02-23 11:24:19
【问题描述】：

我有一个简单的建议框，或类似的，但它会根据用户的打字速度获得两次结果。我猜是因为之前的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)

【问题讨论】：

查看答案希望对您有所帮助。

标签： javascript ajax coffeescript xmlhttprequest

【解决方案1】：

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

【讨论】：