Question

我目前正在开发一个项目，该项目根据倒数计时器显示和显示DOM个元素。还有另一个函数每秒调用一次。

以下是代码示例：

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);

}

我试图提高性能，我尝试减少DOM请求的数量，并根据倒数计时器查看替代方法来解决此问题。

Answer 1

像

这样的东西

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

您可以在运行计时器之前存储所有节点引用以限制DOM访问时间（getElementById）。

之后，使用className而不是style属性会更快。你需要为每个州声明一个特定的CSS规则。

我建议你使用一个通用函数来自动设置所有具有相同CSS类名的节点。

<强> 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示例

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

基于倒数计时器

2 个答案: