Question

我的代码旨在可视化一些复杂的数据。用户首先选择要加载的数据文件;点击加载按钮后，页面会生成一个＆＃34;情节＆＃34;带有onclick事件处理程序的按钮，其函数为renderPlots()。

当用户点击＆＃34;情节＆＃34;按钮，然后所有的图都正确生成，我很高兴。但是，在数据集较大的情况下，绘图过程可能需要几秒钟，因此我希望将按钮文本更改为＆＃34;渲染......＆＃34;正在生成图表，以便用户知道他们的情节正在进行中。

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

的内容

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;它还没有出现。

如果是，则使用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 }将处理开始延迟到下一个＆＃34;帧＆＃34;将解决问题：

{{1}}

在渲染d3 svg对象之前更改引导按钮文本

1 个答案: