flujo de ejecución

Las funciones se ejecutan en el orden en que se llaman

Perogrullada

flujo de ejecución

function funcion1(x) {
    x = x * 2;
    console.log('funcion1 => ' + x)
    return x; 
}

function funcion2(x) {
    x = x + 100;
    console.log('funcion2 => ' + x);
    return funcion3(x);
}

function funcion3(x) {
    x = x / 3;
    console.log('funcion3 => ' + x);
    return x;  
}

function funcion4(x) {
    x = x * 4;
    console.log('funcion4 => ' + x)
    return x;
}

function main() {    
  var x = 10;
  x = funcion1(x);
  x = funcion2(x);
  x = funcion4(x);
}

main();

¿Qué saldrá en la consola del navegador?

flujo de ejecución

Ejecuta el código aquí:
​https://repl.it/CLwS/0

funcion1

funcion2

funcion3

funcion4

Resultado:

funcion1 => 20
funcion2 => 120
funcion3 => 40
funcion4 => 160

programación síncrona

* http://elmanantialdebits.blogspot.com.es/2013/08/que-es-eso-de-la-programacion-asincrona.html

Gran parte del tiempo de las operaciones que realiza un programa en su ejecución se pierde

esperando

• Lectura de disco
• Interacción del usuario (hacer clic, pulsar teclas, etc.)
• Recepción de datos por la red
• Etc.

programación síncrona

Para aprovechar la CPU, cuando un proceso debe esperar, dicho proceso se bloquea y otro toma su lugar (ejecución concurrente).

Cuando llega la señal de que la espera (operación) ha terminado, el proceso se reanuda.

programación síncrona

Desde el punto de vista de un programa, cuando la llamada a una función que realiza una operación termina, la operación se ha completado.

Implícitamente, significa que nuestro programa ha estado esperado a que dicha operación terminase.

Debido a que la terminación de la operación y la reanudación del programa ocurren a la vez, se dice que estamos realizando llamadas síncronas.

programación asíncrona

• No bloqueamos la ejecución del programa (por eso a las llamadas asíncronas también se les dice no bloqueantes)

• La llamada retorna antes de que se complete la operación y, por tanto, no puede devolver el resultado

La alternativa a esperar es...

no esperar

programación asíncrona

Existen diversos mecanismos para lograrlo:

• Polling. Preguntar cada cierto tiempo si se ha completado la operación

programación asíncrona

• Interrupción. Esperar a una señal y que nuestro programa o el sistema ejecute, en el momento en que se recibe dicha señal, un código en respuesta a la misma

programación asíncrona

• Eventos/mensajes. Es una mejora sobre polling. Cuando termina la operación se envía un mensaje que se encola. El programa comprueba si ha llegado algún mensaje. Cada mensaje tiene un indicador de la operación completada y deberá ser respondido correspondientemente

programación asíncrona

• Sincronización (p.ej. futures/promises).  La ejecución prosigue normalmente mientras no se necesite el resultado. En el momento que necesitamos el resultado, esperamos hasta tenerlo

programación asíncrona

• Callbacks (retrollamadas). Como la interrupción, pero indicamos qué código hay que ejecutar cuando se complete la operación, en el momento de realizar la llamada asíncrona

programación asíncrona

Callbacks

• El mecanismo más extendido para implementar asincronía

• Función (habitualmente anónima) que recibe como parámetro el resultado de la operación asíncrona

• Concepto de programación funcional (esto es una historia para otro día...)

programación asíncrona

function funcion1(x) {
    x = x * 2;
    console.log('funcion1 => ' + x)
    return x; 
}

function funcion2(x) {
    x = x + 100;
    console.log('funcion2 => ' + x);
    return funcion3(x);
}

function funcion3(x) {    
    setTimeout(function () {
        x = x / 3;
        console.log('funcion3 => ' + x);  
  }, 1000);	
  return x;  
}

function funcion4(x) {
    x = x * 4;
    console.log('funcion4 => ' + x)
    return x;
}

function main() {    
    var x = 10;
    x = funcion1(x);
    x = funcion2(x);
    x = funcion4(x);
}

main();

funcion1 => 20
funcion2 => 120
funcion4 => 480
funcion3 => 40

Resultado:

http://plnkr.co/edit/PGOpJJ

programación asíncrona

function funcion1(x) {
    x = x * 2;
    console.log('funcion1 => ' + x)
    return x; 
}

function funcion2(x) {
    x = x + 100;
    console.log('funcion2 => ' + x);
    return funcion3(x);
}

function funcion3(x) {
    var def = $.Deferred();
    setTimeout(function () {
        x = x / 3;
        console.log('funcion3 => ' + x);
        def.resolve(x);
    }, 1000);
    return def;  
}

function funcion4(x) {
    x = x * 4;
    console.log('funcion4 => ' + x)
    return x;
}

function main() {    
    var x = 10;
    x = funcion1(x);
    var deferred = funcion2(x);
    deferred.then(funcion4);
}

main();

funcion1 => 20
funcion2 => 120
funcion3 => 40
funcion4 => 160

Resultado:

http://plnkr.co/edit/wfhh7d

AJAX

(Asynchronous JavaScript And XML)

• Técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications)

• Estas aplicaciones se ejecutan en el cliente (el navegador web) mientras se mantiene la comunicación asíncrona con el servidor en segundo plano

• De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones

AJAX

• jQuery proporciona varios métodos para realizar peticiones AJAX:
  • $.ajax: ejecutar una petición HTTP (por defecto será asíncrona, pero puede ser síncrona también) 

• ​​$.get: cargar datos utilizando una llamada HTTP GET 

$.ajax('http://api.icndb.com/jokes/random', {
    type: 'GET',
    success: function(data) {
        // your code
    }
});

$.get('http://api.icndb.com/jokes/random', function(data) {
    // your code    
});

AJAX

Ejemplo:

Llamada síncrona a la ICNDb

(Internet Chuck Norris Database)

http://plnkr.co/edit/xzA2bV?p=info

$.ajax({
    type: 'GET',
    url: 'http://api.icndb.com/jokes/random',
    async: false,
    success: function (data) {
      if (data.type === 'success') {
        // TODO
      }
    }
});

AJAX

Ejemplo:

Llamada asíncrona a la ICNDb

(Internet Chuck Norris Database)

http://plnkr.co/edit/TKAeSh?p=info

$.get('http://api.icndb.com/jokes/random', function (data) {    
    if (data.type === 'success') {
      // TODO
    }
  });