One important part of the interactive web pages is the timings and event responses.
The timer approach is usually simpler- after preset time something is executed. The sequence follows a pattern. Be it one time delayed execution or execution on regular intervals. It is usually used for actions that are always performed.
The event driven approach is more modern- after the user performs some action then something happens immediately (or optionally with delay), but the execution pattern follows the user actions and not predefined pattern. It is used for actions that might be performed if and when the user wants them.
Timed event is for example the page is loading and after one second some animation is played. After few seconds more some other animation is played.
Event driven example is the page is loaded and the “onload” event is fired and then the the actions sequence is started. After some other part of the page is loaded, another sequence is started. Meanwhile the user has clicked something and another sequence is started.
There are also load and/or execution blocking events/tasks and non-blocking. For example image can be loaded asynchroneously long after the page is loaded. While it is loading the other elements are loaded as sonn as they are ready. Placeholder is used until the image is loaded. The image can be also loaded progressively by increasing the displayed quality while it is still loading. For scripts it is blocking- no further loads are performed until the script is loaded.
for fast connections and instant server responses the loading is assumed, by the user, to happen instantly, but on slow connection or slow server response the users might notice the difference.
On the example the first picture is loaded instantly and in a non blocking manner. The second is delayed (server side), but is also non blocking. Third is also instant and non blocking. Forth picture is loaded instantly, but because there are blocking elements before it, it is displayed with greater delay, despit it being available much earlier (it is the same file as for pictures 1 and 3).
Second picture is delayed via PHP. It gets delivered 10 seconds after the request, but it does not block the loading of the following elements.
Even if the PHP script does not provide the media type as header, the browser (tested with Chrome and Edge) loads the image, despite header reporting the content as text.
Attempting to add event listener via JavaScript, when the element is not available, causes error. Because of this it is added in try-catch element.
After the body is loaded, all waiting elements are loaded, the position of the third picture is changed. This happens after the DOM is parsed and the pictures are loaded.
There is delay of several seconds, before the second button’s event listener gets registered.
So let’s switch to the animation.
The third picture is animated when the page is loaded. The first one can be animated from the beginning via the first button and second button does the same, but after the page is fully loaded.
So can it become spageti? Yes. Of course it can be spageti with timed actions and events. If there are JS generated/removed elements and some actions are on hoover with reordering and rerendering, then it can become nightmare.