javascript - length - jquery replace all
jQuery/Javascript-Cómo esperar a que el DOM manipulado se actualice antes de continuar con la función (2)
Tiene un bucle que se ejecuta durante 5 segundos y bloquea el navegador web durante ese tiempo. Dado que el navegador web está congelado, no puede hacer ninguna representación. ¿Debería usar setTimeout() lugar de un bucle, pero supongo que ese bucle es solo un reemplazo para una función de uso intensivo de la CPU que toma un tiempo? Puede usar setTimeout para darle al navegador la oportunidad de renderizar antes de ejecutar su función:
jQuery:
$(function() {
$(''button'').click(function(){
(function(cont){
$(''div'').text(''Processing JQ...'');
start = new Date();
end = addSecs(start,5);
setTimeout(cont, 1);
})(function(){
do {start = new Date();} while (end-start > 0);
$(''div'').text(''Finished JQ'');
})
});
});
Vanilla JS:
document.getElementsByTagName(''a'')[0].onclick = function(){
doRun(function(){
do {start = new Date();} while (end-start > 0);
document.getElementById(''msg'').innerHTML = ''Finished JS'';
});
return false;
};
function doRun(cont){
document.getElementById(''msg'').innerHTML = ''Processing JS...'';
start = new Date();
end = addSecs(start,5);
setTimeout(cont, 1);
}
También debe recordar declarar siempre todas las variables con la palabra clave var y evitar exponerlas al ámbito global. Aquí hay un JSFiddle:
Lo que estoy tratando de hacer es actualizar un div simple para que diga "Procesando ..." antes de ejecutar una secuencia de comandos con un uso intensivo de la CPU (se tarda de 3 a 12 segundos en ejecutarse, no AJAX) y luego actualizar el div para que diga "¡Terminado! " cuando termine.
Lo que estoy viendo es que el div nunca se actualiza con "Processing ...". Si configuro un punto de interrupción inmediatamente después de ese comando, entonces el texto div se actualiza, así que sé que la sintaxis es correcta. Mismo comportamiento en IE9, FF6, Chrome13.
Incluso cuando se pasa por alto jQuery y se usa Javascript básico en bruto, veo el mismo problema.
Usted pensaría que esto tendría una respuesta fácil. Sin embargo, dado que jQuery .html () y .text () no tienen un enlace de devolución de llamada, eso no es una opción. Tampoco está animado, por lo que no hay una cola para manipular.
Ustedes pueden probar esto utilizando el código de muestra que preparé a continuación, que muestra las implementaciones jQuery y Javascript con una función de 5 segundos de CPU alta. El código es fácil de seguir. Cuando haces clic en el botón o en el enlace, nunca ves "Procesando ..."
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
<script type="text/javascript">
function addSecs(d, s) {return new Date(d.valueOf()+s*1000);}
function doRun() {
document.getElementById(''msg'').innerHTML = ''Processing JS...'';
start = new Date();
end = addSecs(start,5);
do {start = new Date();} while (end-start > 0);
document.getElementById(''msg'').innerHTML = ''Finished JS'';
}
$(function() {
$(''button'').click(function(){
$(''div'').text(''Processing JQ...'');
start = new Date();
end = addSecs(start,5);
do {start = new Date();} while (end-start > 0);
$(''div'').text(''Finished JQ'');
});
});
</script>
</head>
<body>
<div id="msg">Not Started</div>
<button>jQuery</button>
<a href="#" onclick="doRun()">javascript</a>
</body>
</html>
configúrelo para procesar, luego haga un setTimeout para evitar que la tarea intensiva de la CPU se ejecute hasta después de que se haya actualizado el div.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
<script>
function addSecs(d, s) {return new Date(d.valueOf()+s*1000);}
function doRun() {
document.getElementById(''msg'').innerHTML = ''Processing JS...'';
setTimeout(function(){
start = new Date();
end = addSecs(start,5);
do {start = new Date();} while (end-start > 0);
document.getElementById(''msg'').innerHTML = ''Finished Processing'';
},10);
}
$(function() {
$(''button'').click(doRun);
});
</script>
</head>
<body>
<div id="msg">Not Started</div>
<button>jQuery</button>
<a href="#" onclick="doRun()">javascript</a>
</body>
</html>
puede modificar el retraso de setTimeout según sea necesario, puede que tenga que ser más grande para máquinas / navegadores más lentos.
Editar:
También puede usar una alerta o un cuadro de diálogo de confirmación para permitir que la página se actualice.
document.getElementById(''msg'').innerHTML = ''Processing JS...'';
if ( confirm( "This task may take several seconds. Do you wish to continue?" ) ) {
// run code here
}