在呈现 d3 svg 对象之前更改 bootstrap 按钮文本

Question

我有旨在可视化一些复杂数据的代码。用户首先选择要加载的数据文件；单击加载按钮后，页面会生成一个 "plot" 按钮，该按钮带有一个带有函数 renderPlots().

的 onclick 事件处理程序

当用户点击 "plot" 按钮时，所有的绘图都会正确生成，我很高兴。但是，在数据集较大的情况下，绘图过程可能需要几秒钟，所以我想在生成绘图时将按钮文本更改为 "rendering..." 之类的内容，以便用户了解他们的绘图正在路上。

根据动态更改按钮文本的 bootstrap 文档，我尝试了类似

的方法

function renderPlots() {
    $("#render").button("loading");

    rest of code that does all the D3 plot generating...;

    $("#render").button("reset");
}

上面代码的问题在于它实际上并没有首先更改按钮文本，它是异步执行的，我不知道如何在任何绘图之前强制按钮文本在屏幕上更改正式开始。

有什么想法吗？

Answer 1

实际上，如果我理解这个问题，内容是运行同步的——不是同步的——这就是为什么浏览器没有机会刷新DOM 在开始大处理任务之前使用新的按钮文本。如果您要 console.log 两次调用 .button() 之间某处的按钮文本，您会看到文本设置为 "loading"；只是还没有出现。

如果是，则使用 setTimeout 将处理的开始延迟到下一个 "frame" 将解决问题：

function renderPlots() {
  $("#render").button("loading");
  setTimeout(function() {
    // rest of code that does all the D3 plot generating...;
    $("#render").button("reset");
  }, 100); // even 0 will do the trick
}

在呈现 d3 svg 对象之前更改 bootstrap 按钮文本

change bootstrap button text before rendering d3 svg object

javascript

svg

d3.js

twitter-bootstrap