为什么JavaScript(来自W3Schools的W3.Sorthtml)需要长时间运行



我想从用户端中对html中的表格进行排序...因为我来宾的速度将更快,从使用方面,所有数据已经存在,因此无需等待服务器从数据库中检索数据并对其进行排序。
为此,我使用w3.js

> w3.getElements = function (id) {
>     if (typeof id == "object") {
>         return [id];
>     } else {
>         return document.querySelectorAll(id);
>     } };

> w3.sortHTML = function(id, sel, sortvalue) {
>     var a, b, i, ii, y, bytt, v1, v2, cc, j;
>     a = w3.getElements(id);
>     for (i = 0; i < a.length; i++) {
>         for (j = 0; j < 2; j++) {
>             cc = 0;
>             y = 1;
>             while (y == 1) {
>                 y = 0;
>                 b = a[i].querySelectorAll(sel);
>                 for (ii = 0; ii < (b.length - 1); ii++) {
>                     bytt = 0;
>                     if (sortvalue) {
>                         v1 = b[ii].querySelector(sortvalue).innerHTML.toLowerCase();
>                         v2 = b[ii + 1].querySelector(sortvalue).innerHTML.toLowerCase();
>                     } else {
>                         v1 = b[ii].innerHTML.toLowerCase();
>                         v2 = b[ii + 1].innerHTML.toLowerCase();
>                     }
>                     if ((j == 0 && (v1 > v2)) || (j == 1 && (v1 < v2))) {
>                         bytt = 1;
>                         break;
>                     }
>                 }
>                 if (bytt == 1) {
>                     b[ii].parentNode.insertBefore(b[ii + 1], b[ii]);
>                     y = 1;
>                     cc++;
>                 }
>             }
>             if (cc > 0) {break;}
>         }
>     } };

脚本表单W3Shools功能SORTHTML与少量数据(表中的ligne)一起工作得很好但是,当我尝试从更大的桌子上做时,跑步的时间确实可以接受。
我真的是JavaScript的新手...我试图理解为什么这么久为了重现问题,我使用W3中的示例来确保不是我的代码解决这个问题,而是我将很多时间重新复制到相同的数据中。
示例

让问题插入1000行等等..您将看到

>     <!DOCTYPE html> <html> <title>W3.JS</title> <script src="https://www.w3schools.com/lib/w3.js"></script>  <body>
> 
> <h2>Sort Tables</h2>
> 
> <p>Click the table headers to sort the  table accordingly:</p>
> 
> <table id="myTable">
>     <thead>    <tr>
>         <th onclick="w3.sortHTML('#myTable', '.item', 'td:nth-child(1)')" style="cursor:pointer">Name</th>
>         <th onclick="w3.sortHTML('#myTable', '.item', 'td:nth-child(2)')" style="cursor:pointer">Country</th>
>     </tr>
>     </thead> <tbody>
>     <tr class="item">
>         <td>Berglunds snabbkop</td>
>         <td>Sweden</td>
>     </tr>
>     <tr class="item">
>         <td>North/South</td>
>         <td>UK</td>
>     </tr>
>     <tr class="item">
>         <td>Alfreds Futterkiste</td>
>         <td>Germany</td>
>     </tr>
>     <tr class="item">
>         <td>Koniglich Essen</td>
>         <td>Germany</td>
>     </tr>
>     <tr class="item">
>         <td>Magazzini Alimentari Riuniti</td>
>         <td>Italy</td>
>     </tr>
>    
> 
> </tbody> </table>
> 
> </body> </html>

我使用https://www.datatables.net库进行排序真的更有效。

,但是我仍然很有趣的是说明为什么这个简单的脚本如此效率低下...

我将分析数据脚本,以查看是什么使其与另一个脚本相提并论,但是如果Somme Good Samaritain可以花几分钟的时间来解释该脚本完全是完全不可行的,那么会欣赏。

谢谢

最新更新