Как обновить данные без мигания экрана angularJS

Я создаю чат, основанный на простых приемах и сообщениях с использованием некоторых php и AngularJS. Поскольку чат требует, чтобы данные постоянно обновлялись, мне было интересно, как лучше всего обновлять данные? Как я сделал это былоКак обновить данные без мигания экрана angularJS

$scope.LoadData = function() {  

$http.get('php/getchatmessages.php') 
    .then(
     function (response) { 
      $scope.data.messages = []; 
      $scope.data.messages = response.data; 

      $scope.evid = $scope.data.messages[0].EventID; 
     }, 
     function (response) { 
      alert(response.data); 
     } 
    );  

    $interval(function(){$scope.LoadData()},5000); 
};

Это не только причина экран мерцает, но скорость обновления ускоряет в течение долгого времени, принимая много мощности процессора и медленно падает браузер.

источник

2016-06-09 Lester

Обновление происходит потому, что вы очищаете все сообщения, а затем добавляете их снова. Вы должны только нажать на $ scope.data.messages новые сообщения, а не удалять все. Кроме того, для такого типа приложений лучше использовать веб-сокеты. –

@RocoCTZ как я могу получить только новые изменения? Да, я слышал о веб-сокетах, но я ищу более простое решение, поскольку время ограничено. – Lester

На ваш взгляд, если все сообщения имеют идентификатор, и вы используете ng-repeat, используйте сообщение «ng-repeat =» в методе data.messages по message.id ". Это приводит к тому, что угловой угол не удаляет все элементы и воссоздает их, но вместо этого обновляет существующие dom-узлы. Также удалите строку '$ scope.data.messages = [];', что не повредит, но совершенно бесполезно. –

Фликер ускоряется, потому что вы используете $interval в каждом вызове, который является PERIODIC и затем добавляет другой вызов. Либо используйте $timeout, который добавляет только один вызов, либо звонит $interval за пределами LoadData.

источник

2016-06-09 22:31:56

Да, каждый раз, когда вы вызываете LoadData, создается объект с интервалом $ (полагайте, что это обещание), поэтому вы фактически получаете пучок из $ интервалов, что приводит к более быстрому мерцанию и сбою браузера. выставлять за пределы LoadData, поэтому у вас есть только один интервал $ каждые 5 секунд, а не много в разное время – devonJS

Каков наилучший способ обновления данных?

Я бы рекомендовал посмотреть на socket.io, который позволяет общаться в реальном времени через API WebSocket. У них также есть chat demo. Я считаю, что WebSocket являются лучшим способом обновления данных в вашем случае.

Если WebSockets не вариант для вас, то ваш метод будет работать, если вы исправить текущие проблемы:

Скорость обновления скоростях со временем

Это потому, что вы звоните $interval(function(){$scope.LoadData()},5000); внутри $scope.LoadData. Переместите его вне функции, чтобы он не запускал новый интервал для каждого вызова.

Принимая много мощности процессора и медленно роняет броузер

Если вы просто заменить выходящий массив сообщения с новым из ответа затем удалить$scope.data.messages = []; и вы перестанете экран от «мерцания ».

Что касается проблемы с данными, вы должны подумать о том, что извлекает только новые сообщения вместо того, чтобы получать все сразу. Таким образом вы можете просто добавить новые данные в свой массив сообщений. Это значительно повышает производительность за счет минимизации размеров ответов.

источник

2016-06-09 22:47:55 cnorthfield

Как обновить данные без мигания экрана angularJS

ответ

Смежные вопросы