Воспроизведение gif при постоянном обновлении
 

Написал AJAX скрипт...Проблема в том, что у меня скрипт обновляет данные каждые 100милисекунд....при нажатии на клавишу у меня должна отображатся картинка анимированая:
if (events.keyCode == 13){
key = "&keyW=1";
psrc = "&psrc=2a.gif";
}
при нажатии на клавишу и ее удержании скрипт отправляет psrc переменку на сервер и там php тулит ее в БД.
Все гуд, только при отображении картинки анимация идет только 100милисекунд я так понял, и воспроизводится заново...получаеться не анимация а конвульсии))))) помогите это исправить

AJAX-скрипт O_o
т.е. мы за тебя должны догадаться, что там происходит?

да так и есть....время анимации картинки = интервалу запроса на php файл

setTimeout('process()', 100);

Ставлю 1000 - анимация почти вся успевает отобразится((( но обновление нужно 100мс стабильно! Помогите! Вчера попробовал понять в чеп проблема, вывел в коде картинку не через запрос на сервер

document.getElementById("stroka").innerHTML = "<img src="1a.gif"></img>";

анимация начала нормально отображатся и эта и та которую выводит через сервер!!!((( бред какой-то. В чем трабла?! Прошу о помощи!:blink:

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

да там всегда нужно 100мс таймаут запросов

Кусок кода:

function process(){
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0){
pid = encodeURIComponent(document.getElementById("pid").value);
xmlHttp.open("GET", "konekt.php?pid=" + pid + key + psrc, true);  
xmlHttp.send(null);
xmlHttp.onreadystatechange = readData;
  }else{
    setTimeout('process()', 100);
  }
}

function readData() {
 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
  xmlResponse = xmlHttp.responseXML;
  xmlRoot = xmlResponse.documentElement;  
  var first = xmlRoot.getElementsByTagName("first")[0].firstChild.data;
  document.getElementById("firstdiv").innerHTML = first;
  }
}

document.onkeydown = function (event){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
events = event || window.event;

if (events.keyCode == 13){
key = "&keyEnter=1";
psrc = "&psrc=1a.gif";
}

}
}

setInterval('process()', 100);

1a.gif - не успевает до конца отобразить анимацию (анимашку "типает").

ну подскажите что делать....пожалуйста..:blink:

посыпать голову пеплом, а потом оторвать руки
из данного кода, ваша проблема очевидной не становится, так как в нем нету ни единой строчки по поводу вашей анимации, кроме как посылки на сторону сервера имени файла анимации
а руки надо отрывать за такое использование объекта xmlhttprequest в глобальной области видимости
идите повторите основы
http://javascript.ru/tutorial/ajax/intro

ну вот пхп

$psrc = $_GET['psrc'];
$pid = $_GET['pid'];

$keyEnter = $_GET['keyEnter'];
if($keyEnter==1){
$suy = $yp - 10;
mysql_query("UPDATE customers SET y='".$suy."', loc='".$psrc."' WHERE id='".$pid."'");
$keyEnter=0;
}

$mybases = mysql_query("SELECT * FROM customers WHERE id='".$pid."'"); 
$dbs = mysql_fetch_array($mybases);
$yp = $dbs['y'];
$xp = $dbs['x'];
$locp = $dbs['loc'];
$name = $dbs['name'];

$animation="<img src= '".$locp."' width='50' height='50' id='".$name."' name='".$name."' style='position: absolute; left:".$xp."; top:".$yp."'></img>";


$dom = new DOMDocument();

$response = $dom->createElement('response');
$dom->appendChild($response);

$first = $dom->createElement('first');
$response->appendChild($first);
$anim = $dom->createTextNode($animation);
$first->appendChild($anim);

$xmlString = $dom->saveXML();
echo $xmlString;

и я не понимаю что значит "такое" использование xmlhttprequest.....все гуд ворк, только аним не работает

а что будет если будет 2 запроса и первый прийдет раньше второго? непоумали что будет? будет то, что первый пришлет данные для второго...

:blink: я ничего не понял......

Jekel,
ваш скрипт реализован через жопу же
и оттого у вас все проблемы
идите повторять основы, пока вы сами не увидите корявость вашего кода
до просветления же
потом напишите его снова, но уже нормальным образом, и воспользуйтесь моим советом в первом посте в данной теме
и тогда все будет ок
ничем помочь более не могу

function createXmlHttpRequestObject() {	
  var xmlHttp;
  if(window.ActiveXObject){
    try{
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }catch (e){
      xmlHttp = false;
    }
  }else{
    try {
      xmlHttp = new XMLHttpRequest();
    }catch (e){
      xmlHttp = false;
    }
  }
  if (!xmlHttp){
    alert("error.");
  }else{
    return xmlHttp;
  }
}
function process(){
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0){
xmlHttp.open("GET", "konekt.php?pid=1", true);  
xmlHttp.send(null);
xmlHttp.onreadystatechange = readData;
  }
}

function readData() {
 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
  xmlResponse = xmlHttp.responseXML;
  xmlRoot = xmlResponse.documentElement;  
  var one = xmlRoot.getElementsByTagName("one")[0].firstChild.data;
  document.getElementById("one").innerHTML = one;
  }
}
setInterval('process()', 100);

Это основа моего скрипта!!! ЧТО ЗДЕСЬ ЧЕРЕЗ ЖОПУ?!!

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

var one = xmlRoot.getElementsByTagName("one")[0].firstChild.data;
  if(document.getElementById("one").innerHTML != one)
		document.getElementById("one").innerHTML = one;

да не глуп, просто я от силы неделю..полтары учу аякс

и зачемь этот код? я прописал..ничего не поминялось)) анимашка бешаная снова

спросил одно понаписали мне левака):D Ну лан, спасибо вам большое))

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

:D давай я пришлю весь архивом

нет, спасибо, не надо
я устал от тебя
хотя, можешь выложить, может кто-то более терпеливый, или с новыми силами поможет тебе

:) ты эт, не злись)))

Сэр, вы там тонкий клиент собрались делать? Или отслеживалку движения курсора в документе?

<irony>
Кстати, кайфовое предложение для всех верстальщиков: генерировать на сервере PNG и отдавать его клиенту прям куском. А потом при каждом движении мышью запрашивать новый, и с :hover париться не придется, о как!
</irony>

там надо при нажатии на клавишу менять картинку (анимацию gif)....запросы на сервак каждых 100 милисекунд происходят .... соответственно аним не успевает проигрыватся до конца

Простите, помимо обработки анимации Ваш скрипт должен 10 раз в секунду делать что-то полезное?

вот весь js код
Он принемает с сервера и отправляет данные на сервер

var xmlHttp = createXmlHttpRequestObject(); 

function createXmlHttpRequestObject() {	
  var xmlHttp;
  if(window.ActiveXObject){
    try{
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }catch (e){
      xmlHttp = false;
    }
  }else{
    try {
      xmlHttp = new XMLHttpRequest();
    }catch (e){
      xmlHttp = false;
    }
  }
  if (!xmlHttp){
    alert("error.");
  }else{
    return xmlHttp;
  }
};

function process(){
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0){
pid = encodeURIComponent(document.getElementById("pid").value);
xmlHttp.open("GET", "konekt.php?pid=" + pid + key + "&psrc=" + psrc, true);  
xmlHttp.send(null);
xmlHttp.onreadystatechange = readData;
  }else{
    setTimeout('process()', 100);
  }
}

function readData() {
 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
  xmlResponse = xmlHttp.responseXML;
  xmlRoot = xmlResponse.documentElement;  
  var one = xmlRoot.getElementsByTagName("one")[0].firstChild.data;
  var tolok = xmlRoot.getElementsByTagName("tolo")[0].firstChild.data;
    if(document.getElementById("one").innerHTML != one){
  document.getElementById("one").innerHTML = one;
  }
   document.getElementById("dop").innerHTML = tolok;
  }
}

document.onkeydown = function (event){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
events = event || window.event;

if (events.keyCode == 87){
key = "&keyW=1";
psrc = "2.gif";
tolo = 1;

}

if (events.keyCode == 83){
key = "&keyS=1";
psrc = "1.gif";
tolo = 2;

}

if (events.keyCode == 65){
key = "&keyA=1";
psrc = "3.gif";
tolo = 3;

}

if (events.keyCode == 68){
key = "&keyD=1";
psrc = "4.gif";
tolo = 4;

}

}
}

document.onkeyup = function (event){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
events = event || window.event;

if (events.keyCode == 87 && tolo == 1){
key = "&keyW=0";
psrc = "0.gif";

}

if (events.keyCode == 83 && tolo == 2){
key = "&keyS=0";
psrc = "0.gif";

}

if (events.keyCode == 65 && tolo == 3){
key = "&keyA=0";
psrc = "0.gif";

}

if (events.keyCode == 68 && tolo == 4){
key = "&keyD=0";
psrc = "0.gif";

}

}
}

setInterval('process()', 100);

мм. раз попросил помочь, то скажу сразу.
тебе надо немного почитать как работает XMLHTTPRequest

второе.

удалить походу тут надо

else{
    setTimeout('process()', 100);
  }

зачем вы постоянно проверяете статус каждые 100мс, если Вы даже не передаете изменения при нажати клавиш и отпускании? ведь пока запрос не закончится новые данные вы все равно не передадите как часто вы бы не проверяли. + у Вас стоит setInterval зачем еще задавать setTimeout ?

на счет останавливания картинки... с XHR недолжно быть если Вы пользуетесь только им а нигде например iframe или еще чето..
а стоп. картинка случаем не в innerHTML one|dop ?

ну я при нажатии клавиши переменка меняется а потом отправляется через function process()...а картинка в one...это то что мы с Вами лепили в пхп)

Я думаю оно даже так будет тупить анимацию
var xmlHttp = createXmlHttpRequestObject();

function createXmlHttpRequestObject() {    
  var xmlHttp;
  if(window.ActiveXObject){
    try{
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }catch (e){
      xmlHttp = false;
    }
  }else{
    try {
      xmlHttp = new XMLHttpRequest();
    }catch (e){
      xmlHttp = false;
    }
  }
  if (!xmlHttp){
    alert("error.");
  }else{
    return xmlHttp;
  }
};
 
function process(){
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0){
xmlHttp.open("GET", "konekt.php", true);  
xmlHttp.send(null);
xmlHttp.onreadystatechange = readData;
  }
}
 
function readData() {
 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
  xmlResponse = xmlHttp.responseXML;
  xmlRoot = xmlResponse.documentElement;  
  var one = xmlRoot.getElementsByTagName("one")[0].firstChild.data;
    if(document.getElementById("one").innerHTML != one){
  document.getElementById("one").innerHTML = one;
  }
 }
}

setInterval('process()', 100);

именно. потому то ты и наблюдаешь эффект не доконца т.к. при document.getElementById("one").innerHTML = one;
обновляется все содержимое в том числе и твоя таже картинка начинает воспроизводится с начала. обойти этот эффект в твоем случае можно только анализируя каждый элемент в one и если он изменился с текущим каждым элементом document.getElementById("one").innerHTML тогда заменять его. здесь надо работать с потомками DOM

в one есть картинки и у них есть id ... О_о а как прописать что один или два из всех картинок поменяли свой src

:) спасибо, поконкретней бы