detener un script AJAX con setTimeout ejecutandose

[mrgubu]

Hola, he creado una aplicación en www.bocateca.com, es un diccionario en el cual la gente añade palabras que los usuarios de la página votan a favor o en contra de que permanezcan en el diccionario.

He creado el proceso de votación de forma bastante tosca con AJAX-PHP (es mi primer script AJAX que consigo hacer funcionar de verdad :) ). Al pinchar en 'Sí' o en 'No', se captura la ip del usuario. Si el usuario no ha votado aún, se contabiliza su voto. Si ya ha votado anteriormente (es decir, si su ip ya está registrada en el campo ip de la tabla palabras), entonces aparece la leyenda 'Ya ha votado durante' tres segundos, tras los cuales, vuelve a aparecer el número de votos.

El problema que tengo es que si el usuario intenta votar en otra palabra antes de que desaparezca la leyenda 'Ya ha votado', entonces el sistema 'se vuelve loco' y la leyenda 'Ya ha votado' aparece en en el sitio anterior a donde se está clickando.

Supongo que el problema puede resolverse deteniendo la ejecución del script cuando se clicka de nuevo, pero no sé como hacerlo, a ver si podéis ayudarme.

Adjunto el javascript:

Código PHP:

  var xmlHttp;

function votar(str,valor)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="/votar.php";
url=url+"?idpal="+str;
url=url+"&vot="+valor;
xmlHttp.onreadystatechange=function(){
var respuesta;
var respuesta_yahavotado;
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
    respuesta=xmlHttp.responseText;
    obj=document.getElementById("getDataVotacion-"+str);
    //Aquí analizo la respuesta, que puede venir con un c0 o un c1 en la cadena. SI viene con un c0 es que ya había votado anteriomente. Si viene con un c1 es que no ha votado pero se ha contabilizado ya su voto
    if(respuesta.substr(12,2)=='c0'){
        //Si ya ha votado, entonces nuestro la leyenda 'Ya ha votado' durante 3 segundos y después muestro otra vez los votos
        respuesta_yahavotado='<div class="yahavotado"><em>Ya ha votado</em></div>';
        obj.innerHTML = respuesta_yahavotado;
        setTimeout("obj.innerHTML = "+respuesta+"", 3000);
    }else{
        //Si no ha votado, muestro los votos con el nuevo voto ya sumado
        obj.innerHTML = respuesta;
    }
}
}
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}


function GetXmlHttpObject(){
    var xmlHttp=null;
    try  {
      // Firefox, Opera 8.0+, Safari
      xmlHttp=new XMLHttpRequest();
      }
        catch (e) {
          //Internet Explorer
          try    {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }
          catch (e) {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
          }
    return xmlHttp;
}  
   

Gracias.

[matak]

Buenas mrgubu

Prueba esto,

Código javascript:

var xmlHttp;
 
function votar(str,valor)
{
if(document.getElementById('yahavotado')){
    alert('debe esperar unos segundos');
    return false;
}
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="/votar.php";
url=url+"?idpal="+str;
url=url+"&vot="+valor;
xmlHttp.onreadystatechange=function(){
var respuesta;
var respuesta_yahavotado;
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
    respuesta=xmlHttp.responseText;
    obj=document.getElementById("getDataVotacion-"+str);
    //Aquí analizo la respuesta, que puede venir con un c0 o un c1 en la cadena. SI viene con un c0 es que ya había votado anteriomente. Si viene con un c1 es que no ha votado pero se ha contabilizado ya su voto
    if(respuesta.substr(12,2)=='c0'){
        //Si ya ha votado, entonces nuestro la leyenda 'Ya ha votado' durante 3 segundos y después muestro otra vez los votos
        respuesta_yahavotado='<div class="yahavotado" id="yahavotado"><em>Ya ha votado</em></div>';
        obj.innerHTML = respuesta_yahavotado;
        setTimeout("obj.innerHTML = "+respuesta+"", 3000);
    }else{
        //Si no ha votado, muestro los votos con el nuevo voto ya sumado
        obj.innerHTML = respuesta;
    }
}
}
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
 
 
function GetXmlHttpObject(){
    var xmlHttp=null;
    try  {
      // Firefox, Opera 8.0+, Safari
      xmlHttp=new XMLHttpRequest();
      }
        catch (e) {
          //Internet Explorer
          try    {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }
          catch (e) {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
          }
    return xmlHttp;
}
 

Ya dirás,saludos

[mrgubu]

ok matak muchas gracias por tu interés y ayuda,

tu propuesta soluciona efectivamente el problema pero haciendo uso del -en mi opinión- siempre molesto alert().

me gustaría encontrar otra solución que detuviera el script sin tener que hacer uso del alert().

gracias, saludos,

[matak]

Ok, si el problema es únicamente el molesto alert puedes quitarlo perfectamente, lo puse para informar al cliente que su votación no se había efectuado. Ya que el título del tema es "detener un script AJAX con setTimeout ejecutandose" y se detiene algo que el usuario a realizado lo correcto -en mi opinion- es informarlo. Pero ya he dicho, puedes quitarlo y se seguirá detiniendo el proceso.

Ahora bien otra solución podría ser encolar, por asi decirlo, los diferentes procesos ajax. Es decir: si el usuario ha votado, o lo que es lo mismo, si la capa yahavotado existe en vez de detener la ejecución se trataría de por medio de setTimeout volver a llamar a la función, generando de esta forma como una especie de cola de espera. Si te agrada esta solución y quieres intentar implementarla sería algo asi:

Código javascript:

if(document.getElementById('yahavotado')){
    setTimeout("votar('"+srt+"','"+valor+"')",3000)
    //alert('debe esperar unos segundos');
    return false;
}
 

Si lo pruebas ya comentarás y si tienes algun problema y puedo ayudarte aqui estaré,

Saludos

[mrgubu]

ok gracias de nuevo matak.

Soy tan torpe con JS que no se me había ocurrido eliminar el alert a ver qué pasaba. Al eliminarlo efectivamente todo funciona 'bien', aunque como tú dices no se informa al usuario. La verdad es que lo prefiero así.

Para mí la solución ideal sería, como en urbandictionary.com, paralizar un proceso de voto cuando se hace click en otro. Es decir, creo que no habría necesidad de encolar los procesos AJAX, bastaría con detenerlos completamente e iniciar el último en el que se ha clickado.

Saludos.