javascript alert未显示Web应用程序的正确运行时间

编程问答 2022-08-15

问题描述

使用以下代码，我试图在浏览器中以datatable格式显示上载的excel文件。对于具有超过1000行和25列的大型文件，大约需要3-4秒，我相信可以改进。但是，该时间是使用手机上的秒表测量的。为了测量准确的时间，我在代码中使用了performance.Now（），但是警报功能无法正确显示时间。如何解决这个问题？并且有可能减少文件加载时间吗？谢谢。

<html>

<head>
    <!-- libs needed for datatable -->
    <!-- <script src="https://code.jquery.com/jquery-3.5.1.js"></script> -->
    <!-- <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script> -->
    <!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"> -->
    <script src="jquery-3.5.1.js"></script>
    <script src="DataTables/DataTables-1.10.21/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="DataTables/DataTables-1.10.21/css/jquery.dataTables.min.css">

    <!-- libs need for sheetJS -->
    <script lang="javascript" src="sheetjs-master/dist/xlsx.full.min.js"></script>

    <!-- custom js script with util functions -->
    <script src="js_uitlities.js"></script>

    <!-- AdminLTE -->
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="AdminLTE-3.0.5/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="AdminLTE-3.0.5/dist/css/adminlte.min.css">
</head>

<body>
    <!-- browse excel -->
    <!-- <div id="wrapper"> -->
    <div class="custom-file mb-2 mt-2">
        <!-- <input type="file" id="input-excel"> -->
        <input type="file" class="custom-file-input" id="input-excel">
        <label class="custom-file-label" for="customFile">Choose file</label>
        <script>
            // Add the following code if you want the name of the file appear on select
            $(".custom-file-input").on("change",function () {
                var fileName = $(this).val().split("\\").pop();
                $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
            });
        </script>
    </div>

    <!-- display table in datatable format -->
    <div id="my_tab">
        <h3 id="tab_title"></h3>
        <p id="timer"></p>
        <table id="my_datatable" class="display"></table>
        <tr>
    </div>

    <!-- dynamically create table using uploaded xlsx -->
    <script>
        load_excel('#input-excel');
    </script>
</body>

</html>

和js_uitlities.js的内容如下：

// load excel file using jquery and time it
function load_excel(excel_id) {
    // const { performance } = require('perf_hooks');
    if (typeof require !== 'undefined') performance = require('perf_hooks');
    const t0 = performance.Now();
    $(excel_id).change(function (e) {
      var reader = new FileReader();
      // var timerStart = Date.Now();
      reader.readAsArrayBuffer(e.target.files[0]);
  
      reader.onload = function (e) {
        var data = new Uint8Array(reader.result);
        var wb = XLSX.read(data,{
          type: 'array'
        });
  
        var htmlstr = XLSX.write(wb,{
          sheet: "",type: 'binary',bookType: 'html'
        });
        htmlstr = modify_htmlstr(htmlstr,"<tr>","</tr>","<thead>","</thead>");
  
        document.getElementById("my_tab").firstElementChild.innerHTML = 'Uploaded excel file';
        document.getElementById("my_datatable").innerHTML = htmlstr;
        $("#my_datatable").DataTable();
        const t1 = performance.Now();
        var time_dfiff = t1 - t0;
        document.getElementById("timer").innerHTML  = "time taken = " + time_dfiff + " secs";
        console.log(time_dfiff);
        alert("time taken = " + time_dfiff + " secs");
        // alert("time to load the table is "+ Date.Now() - timerStart);
      }
    });
  }

// modify htmlstr as returned by XLSX.write function
function modify_htmlstr(htmlstr,pat,pat2,str_after_open_match,str_after_close_match) {
    var open_match = htmlstr.search(pat);
    var close_match = htmlstr.search(pat2);
    htmlstr_sub = htmlstr.substring(open_match,close_match)
    htmlstr_sub_rep = htmlstr_sub.replace(/td/gi,"th")
    htmlstr = [htmlstr.slice(0,open_match),htmlstr_sub_rep,htmlstr.slice(close_match)].join('');
    htmlstr = [htmlstr.slice(0,htmlstr.slice(open_match)].join('');
    close_match = htmlstr.search(pat2) + pat2.length;
    htmlstr = [htmlstr.slice(0,close_match),str_after_close_match,htmlstr.slice(close_match)].join('');
    return (htmlstr);
  }


function modify_htmlstr_mannual(htmlstr) {
    var output = "<html><head><Meta charset='utf-8'/><title>SheetJS Table Export</title></head><body><table><thead><tr><th>uniprot</th><th>logFC</th></thead></tr><tr><td>P49327</td><td>1.059124008</td></tr><tr><td>P40121</td><td>2.676020531</td></tr></table></body></html>"
    return(output);
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

datatablesjavascriptsheetjs