基于倒数计时器的最佳性能Javascript条件

Question

I am currently working on a project that is showing and displaying DOM elements based on a countdown timer. There is another function calling this one every second.

Here is a code sample:

function eventsOnTimer() {

  let x = 1;

  const interval = setInterval(() => {

    if (x >= 0.0 && x < 30.0) {
      document.getElementById('thing1').style.display = 'block';
      document.getElementById('thing2').style.display = 'none';
    } 

    else if (x >= 30.0 && x < 60.0) {
      document.getElementById('thing1').style.display = 'none';
      document.getElementById('thing2').style.display = 'block';
    }

    x++;

  }, 1000);

}

I'm trying to increase performance, and I'm doing this by trying to reduce the number of DOM requests and looking at alternative ways to fire code based on the countdown timer.

Answer 1

Something like

function eventsOnTimer(id1, id2, ms) {
  let toggle = false, thing1 = document.getElementById(id1), thing2 = document.getElementById(id2);

  const interval = setInterval(() => {
      if(toggle){
        thing1.style.display = 'block';
        thing2.style.display = 'none';
      } else{
        thing1.style.display = 'none';
        thing2.style.display = 'block';
      }
      toggle = !toggle;
  }, ms);
}

eventsOnTimer('thing1', 'thing2', 30000);

Answer 2

You can store all of nodes references before run your timer to dicrease DOM access time (getElementById).

After that, using className instead of style property will be faster. You juste need declared an specific CSS rule per state.

I propose to you an generic function to set automatically all of your nodes with the same CSS class name.

JS

var nodeArray = [];
var max_node = 2; 

function storeNodeRef() {
 for(var i =1; i <= max_node; i++) {
  nodeArray.push( document.getElementById("thing"+i)); // Your nodes are declared with ID thing"X". "X" is a numeric value, set "max_node"  with the latest "X" value.
 }
  eventsOnTimer();
}

function setNodeClass(nodeClassName) {
  var i = 0;
  while(i < max_node) {
    nodeArray[i++].className = nodeClassName;
  }

}

function eventsOnTimer() {
  let x = 1;
  const interval = setInterval(() => {
    if (x==30 || x == 60) { // declare here your different state, you can use multiple if/elseif or multiple switch case.
      setNodeClass('hide myClass'+x); // Param : new className
    } 
    x++;
  }, 1000);
}

 storeNodeRef();

CSS

  .process > div, .hide {display:none;}
  #thing2.myClass30, #thing1.myClass60, .process > div.show {display:block; }

HTML EXAMPLE

<div class="process">
    <div id="thing1" class="show" >Hello World 1</div>
    <div id="thing2">Hello World  2</div>
</div>