javascript - 窗口处于事件状态时，前端停止更新元素

Question

因此，我正在开发一个具有jzz模块中的midi监听功能的 Electron 快车应用。
我遇到的问题是，我发送到前端的Midi信息在一段时间后停止工作，但是如果我将窗口从chrome切换到finder/explorer或除chrome之外的任何其他功能，我可以看到元素星形再次将信息获取到前端。
我真的不明白发生了什么。
我的猜测是，我可能会尝试多次打开连接，而不是只打开一次连接并从另一部分读取更新的信息，但这只是一个猜测。
这是我的Midi模块

console.log("---------- MIDI ----------");
    var JZZ = require('jzz');
    
    const sleep = (waitTimeInMs) => new Promise(resolve => setTimeout(resolve, waitTimeInMs));
    var smpte_String,interface_IDs;
    
    function mtcTOString(midi_interface_ID) {
      let selected_key_ID;
      //console.log("----------> TEST");
      //console.log(interface_IDs);
      //console.log(midi_interface_ID);
      if (interface_IDs) {
        for (const [key, value] of Object.entries(interface_IDs)) {
          //console.log(key);
          if (midi_interface_ID == key) {
            // console.log("----------------- yes");
            // console.log(key);
            // console.log("this should log value = "+value);
            selected_key_ID = value;
          }
        }
      }
    
      
      //console.log("midi_interface_ID = "+midi_interface_ID);
      var port = JZZ().openMidiIn(selected_key_ID);
      var smpte = JZZ.SMPTE();
      var midi = JZZ.MIDI();
      //console.log(JZZ.info());
      port
        .connect(function (msg) {
          smpte.read(msg);
          smpteString = smpte.toString();
          smpte_String = smpteString;
          smpteMs = timeStringToMs(smpteString);
    
          if (msg.toString().includes("Program Change")) {
            midi_Channel = msg[0] - 191;
            midi_ProgramChange = msg[1];
            midiTriggerCountDown();
          }
    
        });
      return smpte_String
      // if (typeof (midi_interface_ID) == 'string') {
    
      //   midi_interface_ID = 0;
      // }
        
    
      // if (typeof (midi_interface_ID) == 'number') {
        
    
      // }
    
    
    
    };
    //mtcTOString();
    
    async function midiTriggerCountDown() {
      const adminSettingsData = await AdminSettings.get();
      const useMIDI_ProgramChange = adminSettingsData.timeSettings.useMIDI_ProgramChange;
      const scheduledTimes = adminSettingsData.schedule
    
      var offsetTime = newOffsetTime();
      var startTime = newCurrentTimeInMs() + countDown;
      startTime += offsetTime;
    
      var d = new Date(newCurrentTimeInMs() + countDown);
      var s = "";
      s += (10 > d.getHours() ? "0" : "") + d.getHours() + ":";
      s += (10 > d.getMinutes() ? "0" : "") + d.getMinutes() + ":";
      s += (10 > d.getSeconds() ? "0" : "") + d.getSeconds();
    
      if (midiTriggerCountDownCounter === 0 && useMIDI_ProgramChange != 0) {
        midiTriggerCountDownCounter++;
        startTimeTextHolder = s;
        startTitleHolder = scheduledTimes[midi_ProgramChange].title;
      }
    
      if (midi_ProgramChange === 127 && useMIDI_ProgramChange != 0) {
        var d = new Date(newCurrentTimeInMs() - countUp);
        var s = "";
        s += (10 > d.getHours() ? "0" : "") + d.getHours() + ":";
        s += (10 > d.getMinutes() ? "0" : "") + d.getMinutes() + ":";
        s += (10 > d.getSeconds() ? "0" : "") + d.getSeconds();
    
        startTimeTextHolder = s;
        midiTriggerCountDownCounter = 0;
        console.log("d efter  = " + d);
      };
    }
    
    async function midi_interface_IDs() {
      let midi_inputs = JZZ.info().inputs;
      let midi_input_obj = {};
    
      for (const [key, value] of Object.entries(midi_inputs)) {
        midi_input_obj[(midi_inputs[key].name)] = key;
      }
      console.log(midi_input_obj);
      interface_IDs = JSON.parse(JSON.stringify(midi_input_obj));
      return midi_input_obj
    
    }
    //-------------------------------------------------------------------------
    module.exports = {
      mtcTOString,
      midi_interface_IDs
    }

我正在从service.js文件中读取信息

const CLOCK       = require('./lib/clock');
    //const DB          = require('./lib/db');
    const DB                = require('./../../services/admin-settings');
    //const DB_SETTINGS = require('./lib/db-settings');
    const COUNTDOWN   = require("./lib/countDown");
    const MIDI        = require("./lib/midi");
    
    function currentTime(){
      return CLOCK.CurrentTime();
    };
    function currentTimeMs(){
      return CLOCK.CurrentTimeInMs();
    };
    async function countDown() {
      let data = await COUNTDOWN.CountDown();
      return data
    }
    async function cueCountDown() {
      let data = await COUNTDOWN.CueCountDown();
      return data
    }
    async function settings() {
      let data = await DB.getDbSettings();
      return data
    }
    async function midi(midi_interface_ID) {
      //console.log(midi_interface);
      let data = await MIDI.mtcTOString(midi_interface_ID);
      return data
    }
    
    module.exports = {
        currentTime,
        currentTimeMs,
        countDown,
        cueCountDown,
        settings,
        midi
    }

然后我将它与读取服务文件的index.js文件一起发送到前端

  const WebSocketService  = require('./../../websocket/websocket-service');
    const SCModuleService = require('./service');
    
    const EVENTS = {
      GET_CURRENTTIME: 'currentTime',
      GET_CURRENTTIMEMS: 'currentTimeMs',
      COUNTDOWN: 'countDown',
      CUE_COUNTDOWN: "cueCountDown",
      SETTINGS: 'settings',
      MIDI:"midi"
    };
    
    async function start() {
      setInterval(async () => {
        const currentTime   = SCModuleService.currentTime();
        const currentTimeMs = SCModuleService.currentTimeMs();
        const countDown     = await SCModuleService.countDown();
        const settings      = await SCModuleService.settings();
        const cueCountDown  = await SCModuleService.cueCountDown();
    
        WebSocketService.broadcastToAll(EVENTS.GET_CURRENTTIME, currentTime);
        WebSocketService.broadcastToAll(EVENTS.GET_CURRENTTIMEMS, currentTimeMs);
        WebSocketService.broadcastToAll(EVENTS.COUNTDOWN, countDown);
        WebSocketService.broadcastToAll(EVENTS.CUE_COUNTDOWN, cueCountDown);
        WebSocketService.broadcastToAll(EVENTS.SETTINGS, settings);
    
      }, 250);
    
      setInterval(async () => {
        const settings  = await SCModuleService.settings();
        const midi_interface_ID = settings.MIDI.midi_interface_ID;
        const midi            = await SCModuleService.midi(midi_interface_ID);
    
        WebSocketService.broadcastToAll(EVENTS.MIDI, midi);
    
      }, 100);
    }
    start();

，前端部分看起来像这样

 "use strict";
    const KEYS = {
      'GET_CURRENTTIME': 'currentTime',
      'GET_CURRENTTIMEMS': 'currentTimeMs',
      "COUNTDOWN": "countDown",
      "CUE_COUNTDOWN":"cueCountDown",
      "SETTINGS": 'settings',
      "MIDI":"midi",
      "FOHURL":         "fohUrl",
    
    };
    
    WebSocketService.onEvent(KEYS.GET_CURRENTTIME, (message) => {
      document.getElementById("nowTopRow").textContent = message;
      document.getElementById("now").textContent = message;
    })
    
    WebSocketService.onEvent(KEYS.GET_CURRENTTIMEMS, (message) => {
      //console.log('Message from server: ', message);
    })
    
    WebSocketService.onEvent(KEYS.COUNTDOWN, (message) => {
      //console.log(message);
      if (message.bool) {
        document.getElementById("title").textContent = message.title
        document.getElementById("start").textContent = message.time
    
        document.getElementById("centerNowText").style.display = "none";
        document.getElementById("titleContentBox").style.display = "block";
    
        if (message.countDownTimeInMS < ((3*-60000))) {
          document.body.style.backgroundColor = "#2b2b2b";
        }
        if (message.countDownTimeInMS > ((3*-60000))) {
          document.body.style.backgroundColor = message.colors.countDownColor;
        }
        if (message.countDownTimeInMS > 0) {
          document.body.style.backgroundColor = message.colors.countUpColor;
        }
    
      }else{
        document.getElementById("centerNowText").style.display = "block";
        document.getElementById("titleContentBox").style.display = "none";
        document.body.style.backgroundColor = "#2b2b2b";
    
      }
        // AUTO Shrink text
        var textLength = $('#title').text().length;
        if (textLength < 13) {
          $('#title').css('font-size', '10vw');
        } else if (textLength > 13 && textLength < 19) {
          $('#title').css('font-size', '8vw');
        } else if (textLength > 18) {
          $('#title').css('font-size', '7vw');
        }
    })
    
    WebSocketService.onEvent(KEYS.CUE_COUNTDOWN, (message) => {
      if (message.bool) {
        document.getElementById("cueTime").textContent = "Cue: " + message.time;
    
        if (message.cueCountDownTimeInMS < ((3*-60000))) {
          //document.body.style.backgroundColor = "#2b2b2b";
          document.getElementById("cueTime").style.backgroundColor = "#3b3b3b";
        }
        if (message.cueCountDownTimeInMS > ((3*-60000))) {
          document.getElementById("cueTime").style.backgroundColor = message.colors.countDownColor;
        }
        if (message.cueCountDownTimeInMS > 0) {
          document.getElementById("cueTime").style.backgroundColor = message.colors.countUpColor;
        }
        
      }else{
        document.getElementById("cueTime").style.backgroundColor = "#3b3b3b";
        document.getElementById("cueTime").textContent = "";
      }
    })
    
    WebSocketService.onEvent(KEYS.MIDI, (message) => {
      if (typeof(message) == "string") {
        document.getElementById("timeCode").textContent = message;
        
      }else{
        document.getElementById("timeCode").textContent = "";
      }
    })
    WebSocketService.onEvent(KEYS.FOHURL, (message) => {
      $('body').prepend('<div class="blink d-flex align-items-center justify-content-center"><H1>' + message.text + '</H1></div>');
      console.log(message.text);
    
      sleep(10000).then(() => {
        $(".blink").remove();
      });
    })

因此，从前端到midi.js文件的流程是这样的。

前端获取index.js发送的信息

Index.js从service.js获取信息

Service.js从midi.js获取信息。

整个项目在这里
https://github.com/mattehalen/Scheduled-countdown

Answer 1

与代码本身相比，接缝与PC的性能更相关。
如果使用更新的PC，效果会更好。