Czy występuje opóźnienie w JavaScript?

Question

Sposób, który nie hog zasobów, po prostu zatrzymuje wykonanie na 1 sekundę, a następnie wykonuje?

Co chcę zrobić, to dynamicznie przesuwać wskaźnik Google z jednej wartości do drugiej, tworząc efekt przejścia do wartości zamiast przeskakiwania do niej.

tj -

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

Czy to jest OK, to sposobem czy jest coś bliżej do tego, co robi demo jest niezwykle lepiej? :
How to: Dynamically move Google Gauge?

Answer 1

Nie. JavaScript w przeglądarkach internetowych ma nie tylko jeden wątek, ale ma ten sam wątek z renderowaniem przeglądarki. Jeśli Twój kod JavaScript miał zostać zablokowany, interfejs użytkownika przeglądarki przestałby odpowiadać w tym okresie.

Typowym sposobem radzenia sobie z wydarzeniami opartymi na czasie w JavaScript jest użycie asynchronous timers. John Resig napisał kiedyś interesujący artykuł o nazwie "How JavaScript Timers Work", który możesz wypróbować.

---

UPDATE:

Czy używasz Google Visualization API dla Guages? Jeśli tak, wydaje mi się, że Google obsługuje już płynną animację, którą próbujesz osiągnąć. Spróbuj wykonać następujące czynności w Google Code Playground (miej oko na mierniku Network):

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

to powinno działać.

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