JavaScript 中是否存在安全延迟？答案

【问题标题】：Is there a safe delay in JavaScript?JavaScript 中是否存在安全延迟？
【发布时间】：2010-09-18 00:49:11
【问题描述】：

一种不占用资源、仅停止执行 1 秒然后执行的方法？

我想要做的是动态地将谷歌仪表从一个值移动到另一个值，创建它移动到该值而不是跳转到它的效果。

即-

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?

【问题讨论】：

标签： javascript

【解决方案1】：

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

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

更新：

您是否使用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：setTimeOut() 是（唯一的）方法（没有 jQuery）吗？
@Greg：是的，setTimeout() 和 setInterval() 不会阻止执行。他们将让您定义一个回调函数，该函数将在超时到期时调用。一般来说，这是 JavaScript 中大多数基于时间的事件的方式。
@Greg：如果你这样做setTimeout(function () { }, 1000);，什么都不会发生。 setTimeout() 函数将立即返回，JavaScript 继续执行。 1 秒后，超时将触发什么都不做的回调......请记住，JavaScript（在 Web 浏览器中）是事件驱动的。计时器是一个事件，就像鼠标点击一样。 JavaScript 执行由事件触发。如果没有事件发生，则不会执行任何 JavaScript 代码。如果 JavaScript 阻止执行，浏览器将冻结。
@Greg：您使用的是 Google 可视化 API 吗？...在这种情况下，请查看我的更新答案 :)
@Greg：我不确定我是否理解。这不就是你想要的效果吗？ jsbin.com/elufe4（加载后等待 3 秒）...在 Chrome 和 Firefox 中，我看到网络仪表从 68 平稳移动到 20。

【解决方案2】：

这应该可行。

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

【讨论】：