Javascript-форум (https://javascript.ru/forum/)
-   Firefox/Mozilla (https://javascript.ru/forum/css-html-firefox-mizilla/)
-   -   Скрипт, в котором в цикле обрабатыватся 600 строк очень долго работает на Firefox (https://javascript.ru/forum/css-html-firefox-mizilla/67504-skript-v-kotorom-v-cikle-obrabatyvatsya-600-strok-ochen-dolgo-rabotaet-na-firefox.html)

wamik 21.02.2017 14:15

Скрипт, в котором в цикле обрабатыватся 600 строк очень долго работает на Firefox
 
function getUnusedBuses() {

            $('#unused_buses_table').find("tr:not('.tr_to_copy')").remove()
            $('#unused_buses_table_loading').show();

            $.get(
                    "advertisement.html/unusedBuses",
                    getFilterObjectUnusedBuses(),
                    function (data) {
                        if (data.total != -1) {
                            $('#unused_buses_table_loading').hide();

                            $('#rows_count_unused_buses').html(data.total);
                            var rows = data.rows;
                            var id_autopark = -1;
                            for (var i = 0; i < data.total; i++) {
                                console.log('итерация: ' + i)

                                if (id_autopark !== rows[i].autopark) {
                                    var trElementH = $('#subheader_buses_table').clone().removeAttr('id').removeClass('tr_to_copy').show();
                                     var mas = $(trElementH.find('td')[0]).html(rows[i].autopark);

                                    $('#unused_buses_table').append(trElementH);
                                }

                                var trElement = $('#tr_unused_bus').clone().removeAttr('id').removeAttr('class', 'tr_to_copy').show();
                                var mas = trElement.find('td');

                                $(mas[0]).html(rows[i].id_bus);
                                $(mas[1]).html(rows[i].autopark);
                                $(mas[2]).html((rows[i].is_image == null || rows[i].is_image === 0 ) ? rows[i].bus_route : '<a style="cursor: pointer;" onclick="showRouteMap(' + rows[i].id_bus_route + ')">' + rows[i].bus_route + '</a>');
                                $(mas[3]).html(rows[i].state_number);
                                $(mas[4]).html(rows[i].garage_number);
                                $(mas[5]).html(rows[i].busyness_expiration);
                                $(mas[6]).html(rows[i].inactivity_frequency);
                                $('#unused_buses_table').append(trElement);

                                id_autopark = rows[i].autopark;
                            }
                            console.log('конец цикла')
                            countCheckedBuses();
                        } else {
                            $.messager.alert('Внимание!', data.msg);
                        }
                    },
                    'json'
            );
        }


data.rows - это массив(джейсонина). В массиве 600 строк. Их нужно показать на таблице. tr_unused_bus - это строка - шаблон. subheader_buses_table - это тоже строка- шаблон, но только подзаголовок. В опере, хроме, все это дело отрабатывает довольно быстро- секунда-полтора. В Мозилле же это занимает больше 10 секунд!! не пойму, в чем разница. И да, когда этот скрипт отрабатывает в первый раз в Мозилле, по времени он занимает почти столько же как и в остальных браузерах. Но в последующие разы все очень печально. Поделитесь мнениями. В JavaScript я не профессионал. Поэтому так получилось

<tbody id="unused_buses_table" style="border-bottom: 1px black dotted;">
                        <div id="unused_buses_table_loading" class="panel-loading content-center-abs">Loading...</div>

                        <tr id="subheader_buses_table" class="table_header table-group tr_to_copy"
                            style="display:none;">
                            <td colspan="7" class="text-center bleft">$</td>
                        </tr>

                        <tr id="tr_unused_bus" class="tr_to_copy" style="display: none;">
                            <td class="id-display"></td>
                            <td class="text-center bleft" style="width: 10%;"></td>
                            <td class=" text-center " style="width: 10%;"></td>
                            <td class="text-center" style="width: 10%;"></td>
                            <td class="text-center" style="width: 10%;"></td>
                            <td class=" text-center" style="width: 10%;"></td>
                            <td class="text-center bright" style="width: 10%;"></td>
                            <td class=" text-center bleft bright" style="width: 10%;">
                                <input type="checkbox" value="" onchange="countCheckedBuses()">
                            </td>
                        </tr>
                     </tbody>

Vlasenko Fedor 21.02.2017 18:21

для начала сюда https://learn.javascript.ru/multi-insert
зачем вставлять в цикле
в цикле формируйте html
html +='new data';

а по окончанию цикла одним действием вставляйте
у вас же каждую вставку перерисовывается документ, потому так и долго


Часовой пояс GMT +3, время: 04:44.