javascript - JavaScript 有安全延迟吗？

Question

一种不占用资源，只停止执行 1 秒然后执行的方式？

我想做的是动态地将 Google 仪表从一个值移动到另一个值，从而产生移动到该值而不是跳到该值的效果。

即-

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

这是一种可行的方法还是更接近于演示所做的更好？ :
How to: Dynamically move Google Gauge?

Answer 1

没有。 Web 浏览器中的 JavaScript 不仅是单线程的，而且与浏览器渲染共享同一个线程。如果您的 JavaScript 代码被阻止，浏览器 UI 将在此期间变得无响应。

处理 JavaScript 中基于时间的事件的典型方法是使用 asynchronous timers . John Resig前一段时间写了一篇名为“How JavaScript Timers Work”的有趣文章，您可能想看看。

---

更新:

您使用的是 Google Visualization API对于规范？如果是这样，在我看来，谷歌已经处理了您想要实现的流畅动画。在 Google Code Playground 中尝试以下操作(留意网络仪表):

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);
}