Замедление функции AJAX с помощью setTimeout

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