javascript - 如何在 JavaScript 运行时、回发之前在单击时立即为光标设置动画

Question

我正在实现 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#)

Answer 1

您可以做的是更改您的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);
}