使用setTimeout减慢AJAX函数的速度

Slow down AJAX function with setTimeout

本文关键字：速度 函数 AJAX setTimeout 减慢 使用      更新时间：2023-09-26

我在我的网站上有一个ajax搜索功能，工作得很好!然而，我看到它可能会由于快速的类型而导致未使用的httpResquests。所以我想添加一个计时器来减慢搜索速度。

首先想到的是setTimeout，但它不起作用。它似乎工作(暂停搜索)第一次左右，但结果显示后，然后它只是有点回到正常显示结果第二我的关键是起来。所以在我注意到它不工作之后，不管什么原因，我转向stackoverflow，发现了这个和这个，但它们基本上和我做的完全一样。

我认为它可能与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");
        }
    };
}

您的问题是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");
    }
})();
相关文章：