pause in javascript doesn't work in a loop -


this sleep function:

    function sleep(milliseconds) {   var start = new date().gettime();   (var = 0; < 1e7; i++) {     if ((new date().gettime() - start) > milliseconds){       break;     }   } } 

this function actualize textarea content:

    luminosidad.prototype.prueba = function(num) {     document.getelementbyid("pruebas").value = num;  } 

when want in loop, can see last value. code:

for (var = 1; < 8; i++)     {         sleep(this.opcion.velocidad);         this.prueba(i);     } 

on textarea, can see "7", last number. don't actualize correcly. why can happens? (sleep works correctly)

why can happens?

because never give browser chance show updates you're making, because you're keeping ui thread busy looping pointlessly.

busy-waits never right answer situation.

in case, you're looking either setinterval of series of settimeouts:

function luminosidad() {}  luminosidad.prototype.prueba = function(num) {    document.getelementbyid("pruebas").value = num;  };  luminosidad.prototype.loop = function(milliseconds) {    var = 1;    var obj = this;      settimeout(next, milliseconds);      function next() {      obj.prueba(i++);      if (i < 8) {        settimeout(next, milliseconds);      }    }  };  var l = new luminosidad();  l.loop(500);
<input type="text" id="pruebas">

note: loop function returns before updates pruebas element. if have logic needs run after updates complete, you'll want have loop either accept callback or return promise.

since javascript doesn't have standard form of promise yet (they're coming in es6, not far away @ all), here's example of having callback:

// requires browser support es6 promises!  function luminosidad() {}  luminosidad.prototype.prueba = function(num) {    document.getelementbyid("pruebas").value = num;  };  luminosidad.prototype.loop = function(milliseconds, callback) {    var = 1;    var obj = this;      settimeout(next, milliseconds);      function next() {      obj.prueba(i++);      if (i < 8) {        settimeout(next, milliseconds);      } else {        callback();      }    }  };  var l = new luminosidad();  l.loop(500, function() {    // runs when done    document.body.insertadjacenthtml(      "beforeend",      "all done"    );  });
<input type="text" id="pruebas">

in es6, might use promise instead:

// requires browser support es6 promises!  function luminosidad() {}  luminosidad.prototype.prueba = function(num) {    document.getelementbyid("pruebas").value = num;  };  luminosidad.prototype.loop = function(milliseconds) {    var obj = this;    return new promise(function(resolve) {      var = 1;        settimeout(next, milliseconds);        function next() {        obj.prueba(i++);        if (i < 8) {          settimeout(next, milliseconds);        } else {          resolve();        }      }    });  };  var l = new luminosidad();  l.loop(500).then(function() {    // runs when done    document.body.insertadjacenthtml(      "beforeend",      "all done"    );  });
<input type="text" id="pruebas">


Comments

Popular posts from this blog

twig - Using Twigbridge in a Laravel 5.1 Package -

jdbc - Not able to establish database connection in eclipse -

Kivy: Swiping (Carousel & ScreenManager) -