AJAX: При быстром скролле select'а, данные во втором - отстают и происходит рассинхро

[grey109]

AJAX: При быстром скролле select'а, данные во втором - отстают и происходит рассинхро

Есть база, из которой берутся данные. Например, первый селест - это бренд чего-либо, второй - товары производимые этим брендом.

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

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


ЗЫ: исходный код XMLHttpRequest тут не привожу, т.к. может кто сталкивался с аналогичной проблемой.

 

[maxwell]

Ставь принудительную задержку, можешь дизейблить селект на 1 секунду.

 

[grey109]

maxwell
Не хотелось бы принутительно замедлять работу.

Если задизейблить первый селекс на какое-то время, то не будет возможности скроллить. Поэтому это тоже не очень подходит.

 

[phprus]

Я считаю самый правильный метод - это сделать задержку, например, в 1 секунду после последнего изменения выбранного значения в 1-м селекте перед тем, как загружать данные с сервера.

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

 

[maxwell]

phprus, в точку.

grey109, принудительной задержки пользователи действительно могут не заметить, т.е. скролить они могут сколько угодно, но выполнится только последний запрос.

 

[flash-vkv]

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

 

[WDStalker]

grey109 кусок кода в студию, как ты обрабатываешь select, какие события?

 

[grey109]

Рабочий пример тут: http://www.oryol.ru/t.php (там же можно посмотреть код)

Код, который обрабатывает запрос и выдает модельный ряд для данного бренда:

===
if (isset($_GET['get']))
{
$models = array();

for ($n=1; $n<10; $n++)
{
$models[] = "model ".$_GET['brand'].".".$n;
}

echo implode ("\n", $models);

return;
}
===

 

[.des.]

....
if (!this.working && this.http) {
...

this.working не нужно.

+ кэшируй на стороне клиента данные.

 

[flash-vkv]

grey109 если по ссылке ваш рабочий пример то перечитайте статьи по обьекту XMLHttpRequest там черным по по английски написано if (http.readyState == 4) {if (http.status=="200") {... ваша обработка данных ... http.abort(); return;} ... проверка на другие ответы ... }

да и вобще весь js код в топку, он некуда не катит.

 

[grey109]

.des.

this.working не нужно.

Убрал

+ кэшируй на стороне клиента данные.

Т.к. я никаких мер от кэширования не делаю, то данные и так кэшируются на стороне клиента.

flash-vkv
А кроме моей ошибки с http.status чем еще плох тот код? Просто этот код тоже не "с потолка взят", я его и нашел в какой-то документации по AJAX'у.

 

[flash-vkv]

не тестил. но должно работать. ajaxLoader.js взять можно тут
если не заработает значит не судьба

<script src="ajaxLoader.js"></script>
<script>
objAJAXLoad = null;
function setup() {
        objAJAXLoad = new classAJAXLoader("objAJAXLoad");
        objAJAXLoad.ChangeGetObjText_200 = Change_200;
        }
function Change_200() {
        var strRe = this.httpRequest.responseText;
        if (strRe) {
                fill(this.editNode, strRe);
                }
        this.httpRequest.abort();
        }   
function fill (select, data){
        if (!select) return;
        
        select.options.length = 0;
        if(data.length == 0) return;
        var arr = data.split('\n');
        for(var i in arr){
                select.options[select.options.length]=
                new Option(arr[i], arr[i], false, false);
                }
        }
function lookup(text, select_id, url) {
        objAJAXLoad.SetParamQuerySingle("brand", text);
        objAJAXLoad.urlResource = url+"?bla=bla";
        objAJAXLoad.FastGetObjXslt(document.getElementById(select_id));
        }
<script>
<body onload="setup();">