Skip to main content
se añadieron 131 caracteres en el cuerpo
Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92

Aquí tienes un ejemplo más corto, sólo congela durante 3 segundos:

function sleep(miliseconds) {
   var currentTime = new Date().getTime();

   while (currentTime + miliseconds >= new Date().getTime()) {
   }
}

$('#sinc').on('click',function () {
  for (let i=0;i<300;i++) {
    sleep(10);
  }
});

$('#sinc').on('click',function () {
  for (let i=0;i<300;i++) {
    setTimeout(sleep(10));
  }
});
$('#test').on('click',function () {
  console.log('Has clickado en el test');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="sinc">Ejecución sinc</button>
<button id="asinc">Ejecución asinc</button>
<button id="test"> Clicka aquí para comprobar la respuesta de la interfaz</button>

Aquí tienes un ejemplo más corto, sólo congela durante 3 segundos:

function sleep(miliseconds) {
   var currentTime = new Date().getTime();

   while (currentTime + miliseconds >= new Date().getTime()) {
   }
}

$('#sinc').on('click',function () {
  for (let i=0;i<300;i++) {
    sleep(10);
  }
});

$('#sinc').on('click',function () {
  for (let i=0;i<300;i++) {
    setTimeout(sleep(10));
  }
});
$('#test').on('click',function () {
  console.log('Has clickado en el test');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="sinc">Ejecución sinc</button>
<button id="asinc">Ejecución asinc</button>
<button id="test"> Clicka aquí para comprobar la respuesta de la interfaz</button>

se añadieron 131 caracteres en el cuerpo
Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92
  1. La línea 9 llama al método con el parámetro '?'. Por tanto el parámetro that vale '?' (línea 3).

  2. El contexto (this) dentro del método durante la ejecución es myObj.

  3. La línea 4 llama a setTimeout, pasando como función el código: function() {console.log(this);}

  4. setTimeout pone en la cola de ejecución la función declarada. Puesto que el tiempo de espera es 0, en cuanto acabe el hilo de ejecución principal se ejecutará.

  5. Termina el hilo principal.

  6. El intérprete de Javascript busca lo que esté pendiente de ser ejecutado, encuentra la función y la ejecuta en el contexto global, por tanto thises window. Si hubiésemos usado bindbind o hubiésemos declarado la función usando la notación "flecha" (fat arrow), el contexto se habría mantenido:

Puesto que Javascript no es multihilo, 1000sdurante unos 1000 segundos tu navegador estaría congelado, el usuario podría pulsar botones y no pasaría nada.

  1. La línea 9 llama al método con el parámetro '?'. Por tanto el parámetro that vale '?' (línea 3).

  2. El contexto (this) dentro del método durante la ejecución es myObj.

  3. La línea 4 llama a setTimeout, pasando como función el código: function() {console.log(this);}

  4. setTimeout pone en la cola de ejecución la función declarada. Puesto que el tiempo de espera es 0, en cuanto acabe el hilo de ejecución principal se ejecutará.

  5. Termina el hilo principal.

  6. El intérprete de Javascript busca lo que esté pendiente de ser ejecutado, encuentra la función y la ejecuta en el contexto global, por tanto thises window. Si hubiésemos usado bind o hubiésemos declarado la función usando la notación "flecha" (fat arrow), el contexto se habría mantenido:

Puesto que Javascript no es multihilo, 1000s tu navegador estaría congelado, el usuario podría pulsar botones y no pasaría nada.

  1. La línea 9 llama al método con el parámetro '?'. Por tanto el parámetro that vale '?' (línea 3).

  2. El contexto (this) dentro del método durante la ejecución es myObj.

  3. La línea 4 llama a setTimeout, pasando como función el código: function() {console.log(this);}

  4. setTimeout pone en la cola de ejecución la función declarada. Puesto que el tiempo de espera es 0, en cuanto acabe el hilo de ejecución principal se ejecutará.

  5. Termina el hilo principal.

  6. El intérprete de Javascript busca lo que esté pendiente de ser ejecutado, encuentra la función y la ejecuta en el contexto global, por tanto thises window. Si hubiésemos usado bind o hubiésemos declarado la función usando la notación "flecha" (fat arrow), el contexto se habría mantenido:

Puesto que Javascript no es multihilo, durante unos 1000 segundos tu navegador estaría congelado, el usuario podría pulsar botones y no pasaría nada.

Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92

Sobre la primera pregunta, analicemos el flujo y te darás cuenta de qué pasa:

1 var myObj = {
2   property : "that",
3   whatsThis : function(that) {
4     setTimeout(function () {
5       console.log(this);
6     }, 0);
7   }
8 }
9 myObj.whatsThis("?");
  • Las líneas 1-8 declaran un objeto que tiene un atributo string y otro atributo que es una función, por tanto es un método del objeto. Esto es obvio, pero ya puestos a explicar el código, lo explicamos todo.
  1. La línea 9 llama al método con el parámetro '?'. Por tanto el parámetro that vale '?' (línea 3).

  2. El contexto (this) dentro del método durante la ejecución es myObj.

  3. La línea 4 llama a setTimeout, pasando como función el código: function() {console.log(this);}

  4. setTimeout pone en la cola de ejecución la función declarada. Puesto que el tiempo de espera es 0, en cuanto acabe el hilo de ejecución principal se ejecutará.

  5. Termina el hilo principal.

  6. El intérprete de Javascript busca lo que esté pendiente de ser ejecutado, encuentra la función y la ejecuta en el contexto global, por tanto thises window. Si hubiésemos usado bind o hubiésemos declarado la función usando la notación "flecha" (fat arrow), el contexto se habría mantenido:

var myObj = {
  property : "that",
  whatsThis : function(that) {
    function fn() {
      console.log(this);
    }
    setTimeout(fn.bind(this), 0);
  }
}

myObj.whatsThis("?");


var myObj2 = {
  property : "that2",
  whatsThis : function(that) {
   
    setTimeout(()=> console.log(this), 0);
  }
}

myObj2.whatsThis("?");

Para tu segunda pregunta, imagina que tienes un código que hace algo como

for (let i=0,i<99999,i++) {
  miFuncion(i); //función que tarda una 0.01s en ejecutarse
}

Puesto que Javascript no es multihilo, 1000s tu navegador estaría congelado, el usuario podría pulsar botones y no pasaría nada.

Pero si puedes hacer algo como:

for (let i=0,i<99999,i++) {
  setTimeout(()=>miFuncion(i),0) //función que tarda una 0.01s en ejecutarse
}

Resulta que tienes una cola de ejecución de 99999 funciones, pero entre cada una de ellas el navegador tiene la opción de responder a los eventos del usuario de un modo relativamente rápido, con lo que no quedaría totalmente congelado, simplemente ralentizado. Es por eso que la ejecución asíncrona evita la falta de respuesta de la UI