我正在实现 Google 图表并提供将其导出为 PDF 或 Word 的选项。为了实现这一点,我在绘制每个图表后调用 getImageURI() 方法。这些都在报告中,有些报告有相当多的图片。
在一个接近 100 的脚本上,Firefox 会针对脚本耗时过长发出警告消息。如果我删除图像创建部分,它的运行速度会快得多。但是,我需要在某个时候生成它们。
我的第一次尝试是在单击“导出到 Word/Excel”时运行一个新的 JavaScript 方法来执行此操作,然后将该命令发送回服务器。这工作正常,但我无法让正在进行的光标动画立即开始。
drawChartsWithImageGeneration: function () {
$("body").addClass("cursorProgress"); // changes cursor
$("div.chartContainer").each(function () {
var chartContainer = $(this);
drawChart(chartContainer);
});
$("body").removeClass("cursorProgress"); // changes cursor back
}
如果我在函数的开头添加console.log(),它会立即执行。但是,由于某种原因,直到 drawChart() 函数完成并且发生 PostBack 后,该类才会添加到 body 标记中。
启动此操作的 Anchor 标记在 href 上具有 doPostBack,在 onclick 事件上具有 drawChartsWithImageGeneration。
(仅供引用:使用 C#)
最佳答案
您可以做的是更改您的drawChart函数以接受执行的回调after the chart is rendered 。循环遍历每个图表并以毫秒间隔渲染每个图表。这应该给光标足够的时间在屏幕上改变。
此外,如果页面上有数百个图表,每个图表渲染之间的毫秒间隔将使浏览器 (Firefox) 不会提示脚本无响应。
drawChart: function (container, callback) {
// Chart creation logic here
// somewhere create an instance of the google chart object
// and call it "chart" for use below
google.visualization.events.addListener(chart, 'ready', callback || $.noop);
},
drawChartsWithImageGeneration: function () {
var $chartContainers = $("div.chartContainer");
var chartCount = $chartContainers.length;
$("body").addClass("cursorProgress"); // changes cursor
// Draw each chart one at a time, change the cursor back when all charts have finished
(function doDraw(index) {
if (index < chartCount) {
setTimeout(function() {
drawChart($chartContainers.eq(index), function () {
doDraw(index + 1);
});
}, 1);
}
else {
$("body").removeClass("cursorProgress"); // changes cursor back
// Whatever else you need to do after all charts are ready
}
})(0);
}
关于javascript - 如何在 JavaScript 运行时、回发之前在单击时立即为光标设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32829224/