Обновление списков выпадающих списков JavaScript, но, похоже, не ускоряется - что-то кэшируется?

Question

Я пытался это долгое время проработать и пробовал много способов. Очень просто, группу выбирают из выпадающего слева. Группы в группе отображаются в Назначены col и те, которые не входят в группу в столбце Not Assigned.

У меня есть следующий JavaScript функции, которая, кажется, работает большую часть времени, но когда я делаю выпадающий выбор быстро результирующие списки падения неверны. Нет шаблона, который я вижу, но если я обновляю страницу, все будет хорошо. Если я сделаю свои изменения в падении медленно, это нормально.

Эта система работает правильно, но, возможно, этот метод вызывает проблемы. Раньше я встречал что-то подобное, и мне сказали var d = new Date(); строка должна исправить любую проблему кэширования. Может ли кто-нибудь понять, почему это может произойти?

<script type="text/javascript"> 
function checkGroupList(chosenGroup) 
{ 
checkGroupListParses(chosenGroup, 'inGroup', 1); 
checkGroupListParses(chosenGroup, 'notInGroup', 2); 
} 
</script> 



<script type="text/javascript"> 
function checkGroupListParses(groupName, parseID, parseNo) 
{ 

var xmlhttp; 

if (window.XMLHttpRequest) 
{// code for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp=new XMLHttpRequest(); 
} 
else 
{// code for IE6, IE5 
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 

xmlhttp.onreadystatechange=function() 
{ 
if (xmlhttp.readyState==4 && xmlhttp.status==200) 
{ 
document.getElementById(parseID).innerHTML=xmlhttp.responseText; 
} 
} 

var d = new Date(); 

searchString="http://website/getList.php?parse="+parseNo+"&groupName="+groupName+"&nocache="+d.getSeconds(); 

xmlhttp.open("GET",searchString,true); 
xmlhttp.send(); 
} 
</script> 

Answer 1

Похоже, что вам нужно отменить предыдущий запрос AJAX в том случае, если она не была завершена до того, как новый один выдается (из нового выпадающего выбора).

Представьте, что ваши запросы AJAX занимают 400 мс для завершения. Вы выбираете опцию из раскрывающегося списка, а затем выбираете новую опцию в пределах 250 мс (сначала вы выбрали не тот).

Фактически вы отправляете два запроса AJAX в этом сценарии до того, как будет обработан первый ответ.

Что вы должны сделать, это прервать предыдущий запрос в случае, если вы выпустили новый.

Посмотрите на метод abort() объекта XMLHttpRequest.

Ваш код может выглядеть следующим образом:

var xmlhttp; //Move the scope of the XMLHttp object here. You might want to encapsulate all of this within an object if you want to have more than a single XMLHttpRequest object at times. 

function checkGroupListParses(groupName, parseID, parseNo) 
{ 
    if (xmlhttp) { 
     xmlhttp.abort(); 
     xmlhttp = null; //Get rid of the current request, and set the reference to null. 
    } 

    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
    } 
    else 
    {// code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      document.getElementById(parseID).innerHTML=xmlhttp.responseText; 
     } 
    } 

    var d = new Date(); 

    searchString="http://website/getList.php?parse="+parseNo+"&groupName="+groupName+"&nocache="+d.getSeconds(); 

    xmlhttp.open("GET",searchString,true); 
    xmlhttp.send(); 
} 

Я хотел бы предложить по крайней мере, оберточной, что в затворе, так что xmlhttp не в глобальном масштабе. Также было бы целесообразно инкапсулировать ваши запросы или использовать библиотеку, например jQuery, если это вариант.