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?
}  

这种方法是否可行，或者与演示中所做的更接近的方法更好？：
如何：动态移动 Google Gauge？

- Greg McNulty

Answer 1

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

解决JavaScript中基于时间的事件的典型方法是使用异步计时器。John Resig以前写过一篇有趣的文章，名为“JavaScript计时器如何工作”，您可能想要查看。

---

更新：

你是否正在使用Google Visualization API来制作仪表盘？如果是的话，我认为Google已经处理了你尝试实现的平滑动画。请在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);
}

- Daniel Vassallo

---

@Daniel Vassallo：setTimeOut() 是（没有 jQuery 的）唯一选择吗？ - Greg McNulty

@Greg：是的，setTimeout() 和 setInterval() 不会阻塞执行。它们允许您定义一个回调函数，在超时到期时调用该函数。通常，这是处理 JavaScript 中大多数基于时间的事件的方式。 - Daniel Vassallo

@Greg：如果你执行setTimeout(function () { }, 1000);，什么也不会发生。setTimeout()函数将立即返回，JavaScript执行将继续进行。1秒后，超时将触发回调函数，该函数什么也不做...请记住，在Web浏览器中，JavaScript是事件驱动的。计时器是一个事件，就像鼠标单击一样。JavaScript执行由事件触发。如果没有事件发生，则不会执行任何JavaScript代码。如果JavaScript阻塞执行，浏览器将冻结。 - Daniel Vassallo

@Greg：你是否正在使用Google可视化API？如果是的话，可以看看我的更新答案 :) - Daniel Vassallo

@Greg：我不确定我理解了。这不是你想要的效果吗？http://jsbin.com/elufe4（加载后等待3秒）...在Chrome和Firefox中，我看到网络仪表从68平稳地下降到20。 - Daniel Vassallo

Answer 2

这应该可以工作。

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

- ChaosPandion