¿Cómo puedo crear una función asincrónica en Javascript?

Resuelto markzzz asked hace 12 años • 12 respuestas

Mira este código :

<a href="#" id="link">Link</a>
<span>Moving</span>

$('#link').click(function () {
    console.log("Enter");
    $('#link').animate({ width: 200 }, 2000, function() {
         console.log("finished");            
    });    
    console.log("Exit");    
});

Como puede ver en la consola, la función "animar" es asíncrona y "bifurca" el flujo del código de bloque del controlador de eventos. De hecho :

$('#link').click(function () {
    console.log("Enter");
    asyncFunct();
    console.log("Exit");    
});

function asyncFunct() {
    console.log("finished");
}

¡Siga el flujo del código de bloque!

Si deseo crear mi function asyncFunct() { }con este comportamiento, ¿cómo puedo hacerlo con javascript/jquery? Creo que hay una estrategia sin el uso setTimeout() de

markzzz avatar Mar 01 '12 20:03 markzzz
Aceptado

No se puede crear una función asincrónica verdaderamente personalizada. Eventualmente tendrás que aprovechar una tecnología proporcionada de forma nativa, como por ejemplo:

  • setInterval
  • setTimeout
  • requestAnimationFrame
  • XMLHttpRequest
  • WebSocket
  • Worker
  • Algunas API de HTML5, como la API de archivos y la API de bases de datos web
  • Tecnologías que apoyanonload
  • ... muchos otros

De hecho, para la animación utiliza setInterval jQuery .

pimvdb avatar Mar 01 '2012 13:03 pimvdb

Puedes usar un temporizador:

setTimeout( yourFn, 0 );

(donde yourFnhay una referencia a su función)

o, con Lodash :

_.defer( yourFn );

Pospone la invocación funchasta que se borre la pila de llamadas actual. Cualquier argumento adicional se proporciona funccuando se invoca.

Šime Vidas avatar Mar 01 '2012 13:03 Šime Vidas

aquí tienes una solución simple (otros escriben sobre ella) http://www.benlesh.com/2012/05/calling-javascript-function.html

Y aquí tienes la solución lista arriba:

function async(your_function, callback) {
    setTimeout(function() {
        your_function();
        if (callback) {callback();}
    }, 0);
}

PRUEBA 1 ( puede generar '1 x 2 3' o '1 2 x 3' o '1 2 3 x') :

console.log(1);
async(function() {console.log('x')}, null);
console.log(2);
console.log(3);

PRUEBA 2 ( siempre generará 'x 1' ):

async(function() {console.log('x');}, function() {console.log(1);});

Esta función se ejecuta con tiempo de espera 0: simulará una tarea asincrónica

fider avatar Jun 28 '2013 09:06 fider