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");
    }
})();

使用setTimeout减慢AJAX功能

1 个答案: