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 settimeout
s:
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
Post a Comment