AJAX ¿Técnicas de racionalización?

Question

Mi pregunta es un poco abstracta.

Todos estamos familiarizados con los precargadores/centrifugadores AJAX que aparecen cuando se realiza una solicitud de AJAX. Mi pregunta es ¿cómo evitar esto?

Tome, por ejemplo, una lista ordenable. Cuando un usuario arrastra y suelta elementos para utilizarlos, se realiza una llamada AJAX para actualizar el pedido.

Antes, aparecía un spinner AJAX a pantalla completa para evitar que el usuario hiciera algo hasta que se completara la llamada AJAX.

Mi pregunta es, ¿cómo voy a evitar el AJAX spinner y "agilizar" las solicitudes ajax para garantizar que un usuario inicie 20 solicitudes ajax en 2 segundos, que se ejecutarán en orden?

Realmente no necesito ejemplos de código, solo técnicas/ideas aceptadas o populares. O si me voy completamente fuera de la pista aquí.

Gracias

Answer 1

actualización

uso async javascript library en lugar de esto para lograr lo que quiere

de edad por debajo de

hasta ahora buenas respuestas en cuanto al uso de una matriz o cola para asegurarse de que son Loade d y regresó uno a la vez. Eliminaría el spinner todo junto de forma similar a como lo hace Gmail y solo enviaré un mensaje al usuario solo cuando sea necesario. No tiene sentido molestar al usuario sobre todas estas ofertas de spinner. Simplemente se ven como pequeños hoyos de robot. Aquí hay un código que debo actualizar.

Desde que asentí con esto explicaré sus características.

1. Detiene cola si se produce un error
2. Continúa la cola ya que el éxito se produce
3. Has controladores de eventos para el éxito/error con el contexto

escribo plugins por lo que es esta una idea digna de un plugin? No lo creo, pero oye, nunca se sabe.

var queue = [], 
doRequest = function(params) { 
    params.running = true; 
    $.ajax({ 
     url: params.url, 
     dataType: 'json', 
     success: function(d) { 
      params.success.call(params,d); 
      queue.unshift(); // Quit counting your change and move along. 
      if (queue.length > 0) { 
       doRequest(queue[0]); // Hey buddy, your next. 
      } 
     }, 
     error: function(a,b,c) { 
      params.error.call(params,a,b,c); 
      alert('"oops"'); // Rick Perry 
     } 
    }); 
}, 
queueRequest = function(params) { 
    queue.push(params); // Sir, you'll need to go to the BACK of the line. 
    if (!queue[0].running) { 
     doRequest(queue[0]); 
    } 
}; 

// so to use this little snippit, you just call "queueRequest" like so (over and over) 
queueRequest({ 
    url: 'someajax.abc', 
    success: function(d) { 
     // let the user know their stuff was saved etc. 
     // "this" will be the context of the "params" 
    }, 
    error: function(a,b,c) { 
     // let the user know something went wrong etc. 
     // "this" will be the context of the "params" 
    } 
}); 

Y listo.

Answer 2

Una de las opciones podría ser la creación de una especie de cola de peticiones de clientes. Una vez que el usuario ordena dos elementos, se agrega un elemento a la cola y comienza a ejecutarse. Si ocurre otro tipo antes de que se complete la primera llamada, se coloca en la cola y se ejecutará después de que termine la primera.

ACTUALIZACIÓN:
Debe asegurarse de manejar un caso, cuando se realiza una petición síncrona. En esta etapa, todas las solicitudes ajax deben almacenarse de alguna manera en un campo oculto (solo una idea) y procesarse por servidor antes de la solicitud síncrona.

Answer 3

Puede crear un "administrador de solicitudes ajax" que haga colas (y, potencialmente, agrupe) pendientes de solicitudes ajax. Tengo una aplicación compleja con muchos controles ajax-updatable, muestro spinners solo sobre los controles que se están actualizando. Como tu lista arrastrable actualiza solo cosas en el servidor, probablemente puedas mantenerte alejado sin un girador.

Answer 4

te sugieren cola de jQuery, que ayudan a poner en cola nada, si ajax solicitud o animación cola ...

Answer 5

Esta respuesta es un poco abstracto, pero echar un vistazo al objeto jQuery diferido: http://api.jquery.com/category/deferred-object/

Podría ser útiles en su situación, ya que básicamente añade algo de información del estado de la llamada AJAX que se puede leer/actualizar a voluntad.

Answer 6

• una petición central de P.
• Y una ruleta oculto por encima de todo.

petición central Q Tener una matriz central, que ostenta la totalidad temporal solicitud, por lo tanto, Pesudo código sería algo como esto ...

var centralQ = []; //holds the entire process Q 

var inProc = false; //provides an in Q proc lock 
//processes the request one at a time 

function reqProc() { 
    if(centralQ.length == 0) { 
     inProc = false; 
     return true; 
    } 

    inProc = false; //locks it 
    var req = centralQ[0]; 

    function callBack() { 
     //error/res processing?? 
     if(req.callback) { 
      req.callback.apply(req, arguments); //calls the request callback 
     } 

     window.setTimeout(reqProc, 0); //loop backs, uses timeOut to defer the the loop 
    } 

    //Your loader??? 
    jQuery.get(req.url, req.data, callBack); 
} 

function addReq(addRequest) { 
    centralQ.push(addRequest); 
    if(!inProc) { //does not process if it is already running 
     reqProc(); 
    } 
} 

Usted proabably necesita hacer algún error captura/reintentando, pero tienes una idea aproximada.

Global Spinner Sólo comenzar la fadding en el spinner superior cuando sea necesario, y la decoloración a cabo cuando no se necesita.

Answer 7

¿No es exactamente por eso, hay una opción async en jquery?

Use async: true para poner en cola la solicitud.

Se mantienen los hiladores para evitar enviar la misma solicitud una y otra vez nuevamente. Como tomar un caso, donde hay una opción para habilitar y deshabilitar una característica ... si un usuario vuelve a hacer clic en el mismo botón, está enviando misma solicitud una y otra vez. Solo use hilanderos en estos casos.

Hacer estallar una caja grande, para evitar el acceso a toda la página ... es solo una idea estúpida (sin ofender).

Use los rotuladores, para los elementos específicos .. que están siendo procesados ​​o manipulados de alguna manera. Para la solicitud, sólo tiene que utilizar asíncrono ...

CASO CERRADO;)