[SmilingDog]

Спасибо за примеры , но слишком многого в них не понимаю
Что можно почитать про "особенность прорисовки браузером" ?

document.querySelector(".sbutton").addEventListener("click", function () {
    this.style.opacity = "0.5";
    var that = this;
    setTimeout(function () {
        myfunc(2000);
        that.style.opacity = 1;
    }, 0);
});

Почему тут вызов именно через setTimeout . По другому неполучится ?

Почему неработает код

document.querySelector(".sbutton").addEventListener("click", function () {
    this.style.opacity = "0.5";
    myfunc(2000);
    this.style.opacity = 1;
});

Я вроде понимаю(this меняет значение) . Но почему не работает
тоже самое через вызов getElementById(элемент ведь остается на месте) или просто ??

this.style.opacity = "0.5";
    var that = this;
    this.style.opacity = "0.5";
    myfunc(2000);
    that.style.opacity = 1;

В общем чувствую себя чайником