如何在沒有屏幕閃爍的情況下刷新數據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新消息，而不是刪除所有內容。此外，對於這種應用程序更好使用Web套接字。 –

@RocoCTZ我如何才能獲得新的更改？是的，我聽說過網絡套接字，但我正在尋找更簡單的解決方案，因爲時間有限。 – Lester

在您的觀點中，假設所有消息都有一個ID並且您使用了ng-repeat，請在data.messages track中使用'ng-repeat =「消息通過message.id「'。這使得ure angular不會刪除所有元素並重新創建它們，而是更新現有的dom節點。另外，刪除'$ scope.data.messages = [];'這行並不會傷害，但是完全沒用。 –

由於您在每次調用中使用$interval，因此閃爍速度會加快，這是PERIODIC並在之後添加了另一次調用。請使用$timeout，它只添加一個調用，或者撥打LoadData之外的$interval。

來源

2016-06-09 22:31:56

是的，每次調用LoadData時，都會創建一個$ interval對象（相信它是一個承諾），因此，您實際上會產生一堆$間隔，導致更快的閃爍和瀏覽器崩潰。放在LoadData之外，所以在許多不同的時間裏，你只有每5秒鐘有一個$間隔，而不是很多 – devonJS

什麼是刷新數據的最佳方式？

我建議您查看socket.io，它可以通過WebSocket API實現實時通信。他們也有一個chat demo。我相信WebSocket的刷新數據的最佳方式你的情況。

如果WebSockets的是不是一種選擇適合你，那麼你的方法，如果你解決你目前的問題開展工作：

刷新的速度隨着時間的推移加快

這是因爲你在呼喚$interval(function(){$scope.LoadData()},5000);裏面$scope.LoadData。將它移到該函數之外，以便每次調用都不會啓動新的時間間隔。

以大量的處理器，並慢慢崩潰的瀏覽器

如果你只是更換從響應新退出的消息數組，那麼刪除$scope.data.messages = [];，你會從「閃爍停止屏幕」。

至於數據問題，您應該考慮只檢索新郵件，而不是一次性獲取所有郵件。這樣您可以將簡單地附加到您的消息數組的新數據。這通過最小化響應大小來顯着提高性能。

來源

2016-06-09 22:47:55 cnorthfield

如何在沒有屏幕閃爍的情況下刷新數據angularJS

回答

相關問題