javascript - 延迟 jQuery UI 自动完成焦点事件

Question

我正在使用 jQuery UI 库版本 1.8.23 中的自动完成小部件。我的代码如下所示:

$(this).autocomplete({
     autoFocus: true,
     minLength: 2,
     delay:     100,
     source:    function(request, response) {AutoCpl.getSource(request, response)},
     select:    function(e, ui)             {AutoCpl.getSelect( e, ui, $(this) )},
     open:      function(e, ui)             {AutoCpl.setOpen($(this))}
});

100 毫秒延迟后，我正在使用 AJAX 调用检索产品列表。一切正常，但我对焦点事件有问题。我想当产品悬停在选择列表上时显示产品详细信息。由于需要计算大量数据，我无法立即返回产品详细信息和产品列表。我需要使用另一个 AJAX 调用来稍后在焦点事件上获取这些信息。因为有人可以通过一次鼠标移动将鼠标悬停在所有产品上，所以我无法进行 AJAX 调用并显示每个响应。我必须确保有人确实想要查看特定产品的详细信息，因此我想等待一段时间才能进行 AJAX 调用。

我试图使用 Ben Alman 的 jQuery debouce 插件，但它无法按我想要的方式工作(或者也许我只是使用错误)。如果我尝试这种方式:

focus:     $.debounce(1000, App.getProductsDetails)

事件延迟了 1 秒(没关系)，但在 getProductsDetailt 中我无法访问事件和 ui 对象。我尝试了另一种方法:

focus:     function(e, ui){$.debounce(1000, App.getProductsDetails)}

这次 getProductsDetails 甚至没有被调用，这并没有让我感到惊讶，因为据我所知，debounce 函数必须绑定(bind)到一个事件，即。 $('#id').click($.debounce())。

我的问题是如何延迟焦点事件并同时访问焦点事件返回的对象？

Answer 1

经过几个小时的研究和尝试，我找到了答案。

$.debounce 函数正在传递所有参数，因此我所需要做的就是向我的 AgetProductsDetails 方法添加参数:

App = {
    getProductsDetails: function(e, ui){
        console.log(ui);
    }
}

所以这段代码:

 focus:     $.debounce(1000, App.getProductsDetails)

很好。 Documentation of debounce plug-in给了我一个线索。

后来我犯了错误...