如何在我的 nw.js 应用程序读取 csv 文件时添加加载 gif？

Question

当我触发点击事件时，我的 nw.js 应用程序开始处理先前从 CSV 文件中读取的数据数组。这通常需要一些时间，并且页面会冻结。我想添加一个 loadingGif 以防止用户认为应用程序崩溃了。

这里是点击事件（使用JQuery）。

$("#submitBtn").click({dataArr}, function(event){

    // erases the content of <tbody>
    emptyBody()

    // take the inputs from the user
    let activeFilters = createActiveFilters()

    // use the inputs to filter through a csv file
    let filteredReportsList = filterLines(activeFilters, dataArr)

    // show the results inside <tbody>
    showFilteredLines(filteredReportsList)

    // apply zebra rows
    zebraRows()

});

1 - 我尝试使用函数在处理部分之前添加图像，并使用另一个函数将其删除**加工后**。页面冻结，只有 returns 完成所有处理。所以添加或删除图像是没有用的。

2 - 我试过 使用异步函数，但它也不起作用。

// async function
let searchReports = async (dataArr) => {
    let activeFilters = await createActiveFilters()
    let filteredReportsList = await filterLines(activeFilters, dataArr)

    return filteredReportsList
}

// click event
$("#submitBtn").click({dataArr}, function(event){

    emptyBody()

    addLoadingGif()

    searchReports(dataArr).then(filteredReportsList => {

        removeLoadingGif()

        showFilteredLines(filteredReportsList)

        zebraRows()
    })
})

3 - 我尝试 使用 CSS 动画，而不是 gif 图像。我成功更改了 class，但动画没有显示，因为 class 的样式仅在处理后发生变化。

我不知道还能做什么。感谢您的帮助！ :)`

编辑 1：

这里是addLoadingGif

function addLoadingGif () {
    $('.loadingGif').addClass('loadingGif--on')
}

编辑2：为了使这更容易，我为我正在使用的模板 HTML 和 javascript 文件创建了要点。但在 pt-br 中有记录，抱歉。

来自我的 nw.js 应用的模板 HTML https://gist.github.com/Titowisk/b73cd303d8fb7a7b0d5bd9cd1514c891

Javascript 来自我的 nw.js 应用程序的文件 https://gist.github.com/Titowisk/18a0d02a04b624f7c855f1bd82147913

Edit3：在上面添加了第三次尝试。

Answer 1

试试这个：

var tab = document.createElement('div');
tab.style="z-Index:999999;opacity:.5;position:absolute;abackground:rgba(128,128,128,.75);left:0px;top:0px;color:rgb(255,255,0);height:100%;width:100%;background: url(*your gif* ) center center no-repeat rgba(128,128,128,.75);";
window.top.document.body.appendChild(tab);
$.ajax({url: 'emptyfile.php',type: 'POST',async:true,data: "",dataType: 'html', success: function(msg){ 

// here insert your code

    top.document.body.removeChild(tab);
 },error: function (xhr, ajaxOptions, thrownError) {alert("ERROR:" + xhr.responseText+" - "+thrownError);}});

Answer 2

所以，我参加了 JQuery Ajax 课程并应用到我的问题上，它奏效了！

我使用了 $.get() 函数。在调用它之前，我切换 css 加载动画的可见性，在 $.get 完成后，我再次切换 css 加载动画的可见性。

这是代码

$('#submitBtn').click({dataArr, reportsType}, (e) => {

    emptyBody()

    // show gif
    $('.donutSpinner').toggle()

    let activeFilters = createActiveFilters()

    $.get(`../../assets/csv/${fileName}`, (rawCsv) => {

        // I transfered the csv processing inside the get callback
        dataArr = processRawCsv(rawCsv)

        let filteredReportsList = filterLines(activeFilters, dataArr)

        showFilteredLines(filteredReportsList, reportsType)
        // -------------------------------------------------------
    })
    .fail(() => {
        console.log('falhou!')
    })
    .always(() => {

        // hide gif
        $('.donutSpinner').toggle()

        zebraRows()
    })
})

如何在我的 nw.js 应用程序读取 csv 文件时添加加载 gif？

How can I add a loading gif while my nw.js application reads a csv file?

javascript

nw.js