Gibt es eine sichere Verzögerung in JavaScript?

Question

Ein Weg, der Ressourcen nicht beschlagnahmt, stoppt nur die Ausführung für 1 Sekunde und führt dann aus?

Ich möchte ein Google-Messgerät dynamisch von einem Wert zu einem anderen verschieben und so bewirken, dass es sich auf den Wert zu bewegt, anstatt zu diesem zu springen.

heißt -

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

Ist dies ein OK Weg, dies zu tun, oder ist etwas näher an, was die Demo ist extrem besser geht? :
How to: Dynamically move Google Gauge?

Answer 1

Nein. JavaScript in Webbrowsern ist nicht nur single-threaded, aber es teilt den gleichen Thread mit dem Browser-Rendering. Wenn Ihr JavaScript-Code blockiert würde, würde die Benutzeroberfläche des Browsers in diesem Zeitraum nicht mehr reagieren.

Der typische Weg, zeitbasierte Ereignisse in JavaScript zu lösen, ist asynchronous timers. John Resig schrieb vor einiger Zeit einen interessanten Artikel namens "How JavaScript Timers Work", den Sie vielleicht auschecken möchten.

---

UPDATE:

Sind Sie die Google Visualization API für den guages ​​mit? Wenn dem so ist, scheint mir, dass Google bereits mit der reibungslosen Animation, die Sie erreichen wollen, zurechtkommt. Versuchen Sie, die folgenden in der Google Code Playground (halten ein Auge auf die Netzwerkdruck):

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

Diese funktionieren sollte.

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