Búsqueda de sitios web

jquery - ¿Cómo puedo crear una función asíncrona en Javascript?

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 puedes ver en la consola, la función "animate" es asincrónica, y "fork" interrumpe el flujo del código del bloque del manejador de eventos. De hecho :

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

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

¡sigue el flujo del código del 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 de setTimeout()

Respuesta #1

No puedes crear una función asíncrona verdaderamente personalizada. Eventualmente tendrás que aprovechar una tecnología proporcionada de manera nativa, como:

  • setInterval
  • setTimeout
  • requestAnimationFrame
  • XMLHttpRequest
  • WebSocket
  • Worker
  • Algunas API de HTML5, como la API de Archivos, la API de Bases de Datos Web
  • Tecnologías que soportan onload
  • ... muchos otros

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

Respuesta #2

Puedes usar un temporizador:

setTimeout( yourFn, 0 );

(donde yourFn es una referencia a tu función)

o, con Lodash:

_.defer( yourFn );

Retrasa la invocación de func hasta que la pila de llamadas actual se haya despejado. Cualquier argumento adicional se proporciona a func cuando se invoca.

Respuesta #3

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

Y aquí tienes arriba la solución lista:

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

PRUEBA 1 (puede mostrar '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 mostrará '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

Respuesta #4

Aquí hay una función que recibe otra función y devuelve una versión que se ejecuta de manera asíncrona.

var async = function (func) {
  return function () {
    var args = arguments;
    setTimeout(function () {
      func.apply(this, args);
    }, 0);
  };
};

Se utiliza como una forma sencilla de crear una función asíncrona:

var anyncFunction = async(function (callback) {
    doSomething();
    callback();
});

Esto es diferente de la respuesta de @fider porque la función en sí tiene su propia estructura (no se agregó ningún callback, ya está en la función) y también porque crea una nueva función que se puede usar.

Artículos relacionados