Условия использования Javascript на основе таймера обратного отсчета

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

Вы можете хранить все узлы ссылки, прежде чем запустить таймер dicrease время доступа к DOM (getElementById).

После этого использование классаName вместо свойства стиля будет быстрее. Вам просто нужно объявить конкретное правило 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>