Question

我希望从用户端对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 使用非常少量的数据（表中的情侣）是很好的工作但是，当我尝试从一个更大的桌子做时，运行的时间真的很长，可以接受。
我真的是javascript的新手...我试着理解为什么这么长时间来茹为了重现这个问题，我使用w3中的示例来确保不是我的代码会产生这个问题，但我重新复制了相同数量的数据。
The example

要让问题插入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>

Answer 1

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

但我仍然有兴趣解释为什么这个简单的脚本效率太低......

我将分析datable脚本以查看是什么让它充满力量与另一个相比，但是如果somme好的samaritain可能需要几分钟才能解释这个脚本完全不可行，这将是值得欣赏的。

由于

为什么javascript（来自w3schools的w3.sortHTML）需要这么长时间才能运行

1 个答案: