使用 setTimeout 减慢 AJAX 功能

Question

我的网站上有一个 ajax 搜索功能，效果很好！但是，我看到由于快速的打字机，它可能会导致未使用的 httpResquests。所以我想添加一个计时器来减慢搜索速度。

首先想到的是 setTimeout，但它不起作用。它似乎第一次起作用（暂停搜索），但在显示结果后，它只是有点恢复正常显示结果，第二次我的键是。因此，在我注意到它不管出于何种原因无法正常工作后，我转向 stackoverflow 并找到了 this 和 this 但它们基本上和我所做的完全一样。

我认为这可能与 AJAX 的异步方式有关，并且可能在时间实际结束之前在 setTimeout 中调用该方法，但这并没有多大意义。所以说实话，我不知道发生了什么任何见解都会非常感激。哦，我使用我自己的 API，我相信只要看一下方法名称，您就会知道它们的作用。

function validateNetworkInput()
{
    var query, timer = null;

    query = getValue("searchNetworkInput");

    if(query.length > 0)
    {
        clearTimeout(timer);
        show("searchNetworkWrapper");       
        timer = setTimeout(function(){searchNetworks(query);}, 3000);
    }
    else
    {
        clearTimeout(timer);
        hide("searchNetworkWrapper");
    }
}

...

function searchNetworks(query)
{
    var ajaxObject, params, path;

    ajaxObject = getAjaxObject();
    params = "?q=" + query;
    path = getInternalPath() + "searchNetworks" + params;

    ajaxObject.open("GET", path, true);
    ajaxObject.send();

    ajaxObject.onreadystatechange = function()
    {
        if(ajaxObject.readyState == 4 && ajaxObject.status == 200)
        {
            setInnerHtml("searchNetworkWrapper", ajaxObject.responseText);
        }
        else if (ajaxObject.readyState == 4 && ajaxObject.status != 200)
        {
            getErrorReport("Error Searching Networks", "search our database for the network you are looking for");
        }
    };
}

Answer 1

您的问题是 timer 是您的函数的本地函数，因此下次调用它时它不会记住旧计时器。您需要一个在函数调用之间存在的变量。这样的事情应该可以工作：

var validateNetworkInput = (function() {
  var timer;
  return function() {
    var query = getValue("searchNetworkInput");

    clearTimeout(timer);
    if(query.length > 0) {
        show("searchNetworkWrapper");       
        timer = setTimeout(function(){searchNetworks(query);}, 3000);
    } else {
        hide("searchNetworkWrapper");
    }
})();