Question

我正在尝试启动一个加载程序来显示我正在进行一个进程。将kml文件转换为geojson。转换部分工作正常。较大的kml文件需要更长的时间才能转换，我希望在转换文件时显示我的网页正在执行某些操作。我有这个：

 function convertFunction() {

    loader.style.display = "block";
    if(format.value = "kml"){
         out.value = JSON.stringify(toGeoJSON["kml"]((new DOMParser()).parseFromString(input.value, 'text/xml')), null, 4);
    }
};

我习惯使用Android，当我订购这样的流程时，通常会先启动第一个流程。

为什么我的加载程序在我的文件转换并放入外出文本视图之后才能启动？我怎样才能让它以我想要的方式工作？

我不是先将文件上传到服务器。我正在从文件中读取文本，将文本放在文本视图（输入）中，从输入中获取文本，转换并在输出文本视图中放置新文本。然后是最后一个按钮来创建geojson文件并下载它。

Answer 1

您的加载程序未显示的原因是您的转换过程是阻止代码。这意味着它将保持主线程（UI线程），直到转换过程完成。加载器永远不会显示，因为转换已经在浏览器有机会显示之前完成。

可能的解决方案：

使用Web Worker在单独的线程上执行转换过程。这将使您的UI线程保持空闲，以便您的加载器可以显示和动画。

另一种可能的（更简单的）解决方法：

在页面上显示某些内容以指示转换过程正在进行，并使用setTimeout将转换过程延迟到足以允许页面更新。请注意，在这种情况下，您无法在转换过程中显示任何类型的动画，因为被阻止的UI线程会阻止它动画化。

function convertFunction() {

    if(format.value === "kml"){
        loadingMessage.style.display = "block";
        setTimeout(function () {
            out.value = JSON.stringify(toGeoJSON["kml"]((new DOMParser()).parseFromString(input.value, 'text/xml')), null, 4);
            loadingMessage.style.display = 'none';

            // run any code that would use out.value
        }, 100);
    }
};

加载程序在进程完成后才会启动

1 个答案: