Question

我有一个包含大量数据的图表。有一个中继此图的功能，但这需要2到3秒钟。所以我想在“加载”时显示一个微调框。

具有回调的中继功能：

    self.zoomOut = function (callback) {
        Plotly.relayout(_plotlyDiagram, {
            xaxis: {
                showgrid: true,
                zeroline: false,
                range: [-1, _diagramMaxX],
                fixedrange: true,
            }
        });
        callback();
    }

通过按钮触发的缩放功能：

_$relayoutButton.on('click', function(){
    self.showSpinner();
    mainHandler.zoomOut(
        function callback(){
            self.hideSpinner();
        }  
    );
})

这就是发生的情况：只有绘图图的重新布局，但没有显示微调器。当我将回调与AJAX一起使用时，一切都可以，所以我也不知道错误在哪里。

也尝试过这样的事情：

// Show spinner
setTimeout(() => {
    // Do something and wait for it
} ,0);
// Hide Spinner

但是在我看来，这完全是随机的。有时显示微调器，有时不显示微调器-它不依赖于图表的数据大小，只是不显示。但是就像我说的当我在AJAX中使用此（隐藏/显示微调器）时，一切工作正常。

Answer 1

Plotly.relayout返回一个Promise，它不是一个同步函数。

以下方法可以正常工作：

self.zoomOut = function (callback) {
        Plotly.relayout(_plotlyDiagram, {
            xaxis: {
                showgrid: true,
                zeroline: false,
                range: [-1, _diagramMaxX],
                fixedrange: true,
            }
        }).then(()=>{callback()})
    }

================================================ ==

编辑：承诺版本：

mainHandler.zoomOut = function (callback) {
    return Plotly.relayout(_plotlyDiagram, {
        xaxis: {
            showgrid: true,
            zeroline: false,
            range: [-1, _diagramMaxX],
            fixedrange: true,
        }
    });
}


_$relayoutButton.on('click', function(){
    self.showSpinner();
    mainHandler.zoomOut()
        .then(()=>{
            self.hideSpinner();
        })
})

Answer 2

以下解决方案适用于我。使用其他解决方案时，在调用之前无法显示任何内容。

    function changeZoom(){
        // Start loading animation
        showSpinner(); 
        window.requestAnimationFrame(function () {
            window.requestAnimationFrame(function () {
                // Call function to relayout diagram
                relayoutDiagram();
            });
        });
    }

    function relayoutDiagram(){
        Plotly.relayout(_plotlyDiagram, {
            xaxis: {
                showgrid: true,
                zeroline: false,
                range: [-1, _diagramMaxX],
                fixedrange: true,
            },
        }).then(function () {
            // End loading animation
            hideSpinner();
        });
    }

JS回调不起作用

2 个答案: