如何使用函数隐藏和取消隐藏 div？

Question

我有几个功能，第一个检查网站是否空闲，然后网站是否空闲（不活动）运行一个函数，取消隐藏隐藏在页面加载的 div 元素，一切正常，我的错误开始当用户再次开始使用网站（活动）时，我将代码设置为运行一个名为 hide div 的函数，以隐藏在我的空闲函数运行时预览的 div。但问题在于，当用户处于活动状态时，程序会接收多个输入，因此它会一遍又一遍地运行隐藏 div 功能，因此当网站正在使用时，div 元素开始闪烁。有没有办法只运行我的隐藏 div 函数一次，这样它就不会在活动时一遍又一遍地迭代。第二个问题是当非活动函数第二次运行时 justify-content: center CSS 没有得到应用，我不知道为什么。似乎内置堆栈溢出 ide 没有正确运行该函数，但我当前的代码附在下面。任何帮助表示赞赏。提前致谢。

  function unhideIdleDiv() {
    var x = document.getElementById("con1");
    if (x.style.display === "block") {
      x.style.display = "none";
    } else {
      x.style.display = "block";
    }
  }

  function hideIdleDiv() {
    var x = document.getElementById("con1");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }

var timeoutID;
 
 function setup() {
     this.addEventListener("mousemove", resetTimer, false);
     this.addEventListener("mousedown", resetTimer, false);
     this.addEventListener("keypress", resetTimer, false);
     this.addEventListener("DOMMouseScroll", resetTimer, false);
     this.addEventListener("mousewheel", resetTimer, false);
     this.addEventListener("touchmove", resetTimer, false);
     this.addEventListener("MSPointerMove", resetTimer, false);
  
     startTimer();
 }
 setup();
  
 function startTimer() {
     // wait 5 seconds before calling goInactive
     timeoutID = window.setTimeout(goInactive, 5000);
 }
  
 function resetTimer(e) {
     window.clearTimeout(timeoutID);
  
     goActive();
 }
  
 function goInactive() {
   unhideIdleDiv()
 }
  
 function goActive() {
    hideIdleDiv()
          
     startTimer();
 }

.con1{
  background-color: black;
  border: 3px solid green;
  display: none;
  display: flex;
  justify-content: center;
}

#idleDisplay h4{
  font-size:17px;
  color:white;
 }

<div class="container-fluid con1" id="con1">
  <div id="idleDisplay">
    <h4>Idle Display</h4>
  </div>
</div>