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

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，当我这样订购进程时，它通常会先启动第一个进程。

为什么我的加载程序直到我的文件被转换并放入我的输出 TextView 后才启动？我怎样才能让它按照我想要的方式工作？

我不会先将文件上传到服务器。我正在从文件中读取文本，将文本放置在 TextView (输入)中，从输入中获取文本，转换新文本并将其放入输出 TextView 中。然后最后一个按钮创建 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);
    }
};