🚀 go-pugleaf

W dniu 19.11.2018 o 08:54, Jivanmukta pisze:
> 
>> 3. Ponadto z nazwy w/w funkcji wnioskuję iż naruszasz strukturę DOM by 
>> coś zanimować. Nie wiem jak konkretnie animujesz więc tylko zgaduję. 
>> Jeśli np. używasz innerHTML gdzieś dalej do zapisu, to wtedy takie 
>> cuda mogą się dziać. Nie należy używać do tego celu innerHTML bo jest 
>> strasznie wolne gdyż wymusza odświeżanie _CAŁEJ_ struktury DOM. Wtedy 
>> okresowo możesz tracić dostęp do DOM mimo iż pozornie wydaje Ci się, 
>> że nic się w niej nie zmienia. To dość częsty błąd początkujących 
>> programistów JS a i zaawansowani czasem też o tym nie wiedzą.
>>
> 
> // Animuj literkę w napisie tytułowym:
> 
> var letterIndex = -1;
> var mainTitle;
> 
> function animateMainTitle() {
>      'use strict';
>      if (mainTitle === undefined) {
>          mainTitle = document.getElementById("main_title").innerHTML;
>      }
>      letterIndex = (letterIndex + 1) % mainTitle.length;
>      var s = mainTitle.substr(0, letterIndex) +
>              '<span class="selected_letter">' +
>              mainTitle.substr(letterIndex, 1) +
>              '</span>' +
>              mainTitle.substr(letterIndex + 1);
>      document.getElementById("main_title").innerHTML = s;
>      setTimeout(animateMainTitle, 100);
> }
> 
> Czy gdybym zamiast innerHTML umieścił wszystkie literki w span'ach i 
> ustawiał tylko atrybut class odpowiedniej literki to byłoby lepiej?

Zrobiłem tak i jest dobrze:

var letterIndex = 0;
function animateMainTitle() {
     'use strict';
     document.getElementById('letter' + letterIndex).className = '';
     letterIndex = (letterIndex + 1) % 24;
     document.getElementById('letter' + letterIndex).className = 
'selected_letter';
     setTimeout(animateMainTitle, 100);
}

Dzięki za pomoc.