Фильтр даты приводит к тому, что ng-repeat + другие фильтры очень медленно работают в IE11 - PullRequest
Новая
       19

Фильтр даты приводит к тому, что ng-repeat + другие фильтры очень медленно работают в IE11

0 голосов
/ 15 мая 2018

У меня есть ng-repeat плюс несколько пользовательских фильтров и фильтр диапазона дат, все прекрасно работает в Chrome, Mozilla и Android. Но в IE с фильтром Date Range все останавливается. Для регистрации фильтров требуется 10 секунд (у меня есть фильтры, привязанные к флажкам и свободному тексту), а анимации флажков также отстают до загрузки данных. Если я уберу фильтр диапазона дат, то все нормально в IE.

Список вызывается из Azure API, список в настоящее время имеет длину 8500 записей, но его длина не может быть исключена, и все выполняется гладко с размером, кроме IE и функции диапазона дат.

Я пытался что-то ускорить в IE, например, добавить :: single привязку ко всем {{}} значениям.

Я также использую нумерацию страниц, и для LimitTo установлено значение 20

.

Но эти исправления, по-видимому, бывают, если ng-repeat и фильтры работают медленно в IE8 + в целом, но у меня все в порядке с другими фильтрами, только с диапазоном дат.

Повтор: 

<div class="inner" ng-repeat="app in displayedData = ( applications
                                                    | orderBy:       sortType:sortReverse 
                                                    | filter:        FAl
                                                    | filterStatus:  FStatus
                                                    | filterStage:    FStage
                                                    | dateRange:     startDate:endDate
                                                  ) | start: (currentPage - 1) * perPage |  limitTo: perPage">
<div class="record" ng-class-odd="'odd odd-Record'" ng-class-even="'even even-Record'" data-toggle="collapse" data-target="#{{ app.Id }}">
    <div class="field field-Name">{{ app.Lastname }}</div>
    <div class="field field-AccountNumber">{{ app.AccountNumber }}</div>
    <div class="field field-AppDate">{{ app.DateApplied | date : "dd/MM/yyyy"}}</div>        
</div>

Фильтр диапазона дат: 

//Filter: Dates
App.filter('dateRange', function () {
  return function (applications, startDate, endDate) {
    var filtered = [];
    var start_date = startDate.toString();
    var end_date   = endDate.toString(); 

    angular.forEach(applications, function (value) {            
        if (Date.parse(value.DateApplied) > Date.parse(start_date) && Date.parse(value.DateApplied) < Date.parse(end_date)) {
            filtered.push(value);
        }
    });
    return filtered;
  };
});

Значения для диапазона дат отправляются из пикадайского выбора даты: 

<h4>Date Range</h4>
<div>
    <label style="font-weight: 500">Start Date</label>
    <input style="float: right; width: 128px;" type="text" id="datepickerStartDate" ng-model="startDate">
 </div>
 <div>
     <label style="float: left; font-weight: 500">End Date</label>
     <input style="float: right; width: 128px;" type="text" id="datepickerEndDate" ng-model="endDate">
 </div>

Все остальные фильтры в указанном ниже формате только что передали разные конкретные значения полей. 

//Filter: Status
App.filter('filterStatus', function () {
    return function (applications, Status) {
        var items = {
            status: Status,
            out: []
        };
        angular.forEach(applications, function (value, key) {
            if (this.status[value.Status] === true) {
                this.out.push(value);
            }
        }, items);
        return items.out;
    };
});

Ответы [ 2 ]

0 голосов
/ 16 мая 2018

Проблема была вызвана наличием критериев && в функции диапазона дат, если выписка

При поиске неисправностей я обнаружил, что наличие только одной вещи для проверки в случае, если вся медлительность остановлена.

Вместо этого я создал фильтр для начальной и конечной даты отдельно 

App.filter('startDate', function () {
    return function (applications, startDate) {
        var items = {
            startdate: startDate,
            out: []
        };
        angular.forEach(applications, function (value, key) {
            if (Date.parse(value.DateApplied) > Date.parse(this.startdate)) {
                this.out.push(value);
            }
        }, items);
        return items.out;
    };
});
App.filter('endDate', function () {
    return function (applications, endDate) {
        var items = {
            enddate: endDate,
            out: []
        };
        angular.forEach(applications, function (value, key) {
            if (Date.parse(value.DateApplied) < Date.parse(this.enddate)) {
                this.out.push(value);
            }
        }, items);
        return items.out;
    };
});

Это исправило огромную медлительность в IE. Я, к сожалению, не уверен , почему это вызывало проблему.

0 голосов
/ 15 мая 2018

Во-первых, это то, что вы должны иметь в html. Переместите всю фильтрацию в функцию контроллера - тогда вы можете проверить ее, проверить производительность и т. Д. 

    <div class="inner" ng-repeat="app in displayedData">
...

Во-вторых, подготовьте свои данные. Если ваш бэкэнд возвращает даты в виде строк (хотя не могу догадаться, о чем это), анализируйте их, как только вы их получите. Совершенно очевидно, что разбор дат из строки происходит намного медленнее, чем сравнение двух дат.

...