Блог

Предыстория: Я использую Vue.js и машинописный текст, работающий на собственной серверной плате Linux, для размещения пользовательского интерфейса, который динамически обновляется данными движка в сети. По мере получения данных о двигателе, таких как значения оборотов в минуту, мы обновляем преобразования SVG для анимации датчика.

Проблема: На моем маршруте .vue для представления датчика приложение перестает отвечать примерно через час, и это происходит ТОЛЬКО на этом конкретном представлении. Примерно через час пользовательский интерфейс блокируется, но он возобновляет нормальную работу после того, как я закрою приложение и вернусь. Когда пользовательский интерфейс перестает обновляться, я также больше не могу нажимать какие-либо кнопки или взаимодействовать с чем-либо в пользовательском интерфейсе vue.

Вот некоторый (упрощенный) код, объясняющий, как все работает в этом файле .vue

HTML: В полном коде у меня есть около 16 различных объектов svg, которые я анимирую, обновляя свойство CSS stroke-dashoffset с помощью Javascript

 lt;templategt;  lt;divgt;  lt;svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 761.27 456.243"gt;  lt;g id="Animate"gt;  lt;g class="gauges-48"gt;  lt;line id="fuelAnimate" clip-path="url(#clip-path)" class="gauges-49" x1="37.14" y1="168.353" x2="37.14" y2="80.413"/gt;  lt;/ggt;  lt;/ggt;  lt;/svggt;  lt;/divgt; lt;/templategt;  lt;style scopedgt; #fuelAnimate{ --offset: 87;  stroke-dasharray: 90; stroke-dashoffset: var(--offset);; transition: stroke-dashoffset 0.3s; }  lt;/stylegt;  

В моем коде JS по мере загрузки страницы я получаю ссылки на DOM, вычисляю смещения на основе текущего значения этого.$store.state.boat.fuelLevel и устанавливаю свойство

У меня есть @Watcher, который выполняет действия всякий раз, когда store.ts обновляет значение уровня топлива:

  lt;script lang="ts"gt; import {Component, Prop, Vue, Watch} from 'vue-property-decorator';  @Component export default class Gauges extends Vue {   fuel_Level: any; // Stores reference to the DOM object  fuelOffset: any = 87 // Value we use to set the new stroke-dashoffset   constructor(){  super();  }   mounted(){  setTimeout(() =gt; {  this.computeOffset()  }, 50);   }   //Runs once, as the page is loaded  computeOffset() {  // I have 16 set functions, once for each gauge in the view  this.setFuel()   setTimeout(this.updateLevels, 250);  }   updateLevels(){  // In full code, I have 16 getElementById's  this.fuel_Level = document.getElementById('fuelAnimate')   // And 16 setProperty's, to set the initial offset values  if(this.fuel_Level)   this.fuel_Level.style.setProperty('--offset', this.fuelOffset.toString());   }   setFuel(){  //I thought my problem could be with updating global vars, nulling the values didn't help  this.fuelOffset = null   this.fuelOffset = 89 - ((this.$store.state.boat.fuelLevel) * (87/100));  }   // Whenever this.$store.state.boat.fuelLevel is updated via Store.ts, perform these actions  @Watch('$store.state.boat.fuelLevel')  onFuelChanged(value: string, oldValue: string){  // Updates and assigns new value to this.fuelOffset based on Engine Data value  this.setFuel()     // Sets the new offset, to animate gauge and reflect current data   if(this.fuel_Level)   this.fuel_Level.style.setProperty('--offset', this.fuelOffset .toString());   } } lt;/scriptgt;    

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