¿Hay un retraso seguro en JavaScript?

Question

¿Una forma que no acapara los recursos, simplemente detiene la ejecución durante 1 segundo y luego se ejecuta?

Lo que quiero hacer es mover dinámicamente un indicador de Google de un valor a otro, creando el efecto de que se mueva al valor en lugar de saltar hacia él.

decir -

for(original_value; original_value < new_value; original_value++) 
{ 
    data.setValue(0, 1, original_value); 
    delay half a second here in JavaScript? 
} 

¿Es esta una manera de hacer esto bien, o es algo más cercano a lo que la demo está haciendo es extremadamente mejor? :
How to: Dynamically move Google Gauge?

Answer 1

No. JavaScript en los navegadores web no es solo de una sola hebra, sino que comparte el mismo hilo con la representación del navegador. Si su código JavaScript se bloqueara, la IU del navegador dejaría de responder durante ese período.

La forma típica de abordar eventos basados ​​en el tiempo en JavaScript es mediante el uso de asynchronous timers. John Resig escribió un artículo interesante hace un tiempo llamado "How JavaScript Timers Work", que es posible que desee retirar.

---

ACTUALIZACIÓN:

¿Está utilizando el Google Visualization API de las guas? Si es así, me parece que Google ya maneja la animación suave que estás tratando de lograr. Pruebe lo siguiente en el Google Code Playground (mantener un ojo en el medidor de Red):

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
    var chart; 

    data.addColumn('string', 'Label'); 
    data.addColumn('number', 'Value'); 
    data.addRows(3); 
    data.setValue(0, 0, 'Memory'); 
    data.setValue(0, 1, 80); 
    data.setValue(1, 0, 'CPU'); 
    data.setValue(1, 1, 55); 
    data.setValue(2, 0, 'Network'); 
    data.setValue(2, 1, 68); 

    // Change the value of the Network Gauge after 3 seconds. 
    setTimeout(function() { data.setValue(2, 1, 20); chart.draw(data); }, 3000); 

    // Create and draw the visualization. 
    chart = new google.visualization.Gauge(document.getElementById('visualization')); 
    chart.draw(data); 
} 

Answer 2

Esto debería funcionar.

var id, value = original_value; 
id = setInterval(function() { 
    if (value < new_value) { 
     data.setValue(0, 1, value++); 
    } else { 
     clearInterval(id); 
    } 
}, 1000);